爲什麼要用jquery validate這個表單驗證插件：
form表單驗證是網站建設中前端必須要做的事情，自己寫一個通用沒有bug強大的jquery表單驗證插件並不容易，特別對新手和建站愛好者，有一個通用好用的表單驗證插件式必須的。
jquery validate這個jquery插件幾乎可以輕鬆應對95%以上的表單驗證，
jquery validate表單驗證如何調用？
一。引用jquery.min.js和jquery.validate.js
因爲jquery.validate.js是jquery插件所以必須要有jquery支持，現在沒有使用jquery的網站應該很少。如果你堅持不用jquery，很遺憾這個jquery.validate.js不適合你。
二、js調用代碼如下：
$(function(){
//$('.js-form') 是你的表單的類名或者 id，如果是id的話就是 $('#js-form')
//submitHandler 就是表單驗證通過的時候執行裏面的函數
$('.js-form').validate({
submitHandler: function (form) {
var $form = $(form),
data = $form.serialize(); //序列化表單數據
//這裏是jquery表單驗證通過的時候執行的操作，比如這裏，表單驗證通過的時候執行了jquery的ajax的post操作
$.post('js/test.json',{data:data},function(d){
if(d.Flag){
alert("如果返回爲真，將執行這裏代碼")
}else{
}
},'json');
}
});
}) jquery validate默認驗證規則的提示語中文化：
$.extend($.validator.messages, {
required: "必填",
remote: "請修正該字段",
email: "電子郵件格式不正確",
url: "網址格式不正確",
date: "日期格式不正確",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法後綴名的字符",
maxlength: $.validator.format("請輸入一個 長度最多是 {0} 的字符"),
minlength: $.validator.format("請輸入一個 長度最少是 {0} 的字符"),
rangelength: $.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字符"),
range: $.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: $.validator.format("請輸入一個最大爲{0} 的值"),
min: $.validator.format("請輸入一個最小爲{0} 的值")
});
validate默認的驗證規則中文解釋：
自定義validate表單驗證規則：
以郵箱驗證規則爲例：
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "郵箱格式不對");再多的文字說明都不如看演示來的直接，jquery validate表單驗證演示：
（懶人建站http://www.51xuediannao.com/整理）jquery validate中文API，僅供參考：(這個中文API有點老了，但是大部分依然適用)
|
名稱 |
返回類型 |
描述 |
|
validate(options) |
返回:Validator |
驗證所選的FORM |
|
valid() |
返回:Boolean |
檢查是否驗證通過 |
|
rules() |
返回:Options |
返回元素的驗證規則 |
|
rules("add",rules) |
返回:Options |
增加驗證規則 |
|
rules("remove",rules) |
返回:Options |
刪除驗證規則 |
|
removeAttrs(attributes) |
返回:Options |
刪除特殊屬性並且返回他們 |
|
Custom selectors |
||
|
:blank |
返回:Validator |
沒有值的篩選器 |
|
:filled |
返回:Array <Element > |
有值的篩選器 |
|
:unchecked |
返回:Array <Element > |
沒選擇的元素的篩選器 |
|
Utilities |
||
|
jQuery.format (template,argument ,argumentN...) |
返回:String |
用參數代替模板中的 {n} |
|
Validator: |
||
|
validate方法返回一個Validator對象,它有很多方法, 讓你能使用引發校驗程序或者改變form的內容. validator對象有很多方法,但下面只是列出常用的 |
||
|
form() |
返回:Boolean |
驗證form返回成功還是失敗 |
|
element(element) |
返回:Boolean |
驗證單個元素是成功還是失敗 |
|
resetForm() |
返回:undefined |
把前面驗證的FORM恢復到驗證前原來的狀態 |
|
showErrors(errors) |
返回:undefined |
顯示特定的錯誤信息 |
|
Validator functions: |
||
|
setDefaults(defaults) |
返回:undefined |
改變默認的設置 |
|
addMethod(name,method,message) |
返回:undefined |
添加一個新的驗證方法. 必須包括一個獨一無二的名字,一個JAVASCRIPT的方法和一個默認的信息 |
|
addClassRules(name,rules) |
返回:undefined |
增加組合驗證類型 在一個類裏面用多種驗證方法裏比較有用 |
|
addClassRules(rules) |
返回:undefined |
增加組合驗證類型 在一個類裏面用多種驗證方法裏比較有用,這個是一下子加多個 |
|
內置驗證方式： |
||
|
required() |
返回:Boolean |
必填驗證元素 |
|
required(dependency-expression) |
返回:Boolean |
必填元素依賴於表達式的結果 |
|
required(dependency-callback) |
返回:Boolean |
必填元素依賴於回調函數的結果 |
|
remote(url) |
返回:Boolean |
請求遠程校驗。url通常是一個遠程調用方法 |
|
minlength(length) |
返回:Boolean |
設置最小長度 |
|
maxlength(length) |
返回:Boolean |
設置最大長度 |
|
rangelength(range) |
返回:Boolean |
設置一個長度範圍[min,max] |
|
min(value) |
返回:Boolean |
設置最大值 |
|
max(value) |
返回:Boolean |
設置最小值 |
|
email() |
返回:Boolean |
驗證電子郵箱格式 |
|
range(range) |
返回:Boolean |
設置值的範圍 |
|
url() |
返回:Boolean |
驗證URL格式 |
|
date() |
返回:Boolean |
驗證日期格式(類似30/30/2008的格式,不驗證日期準確性只驗證格式) |
|
dateISO() |
返回:Boolean |
驗證ISO類型的日期格式 |
|
dateDE() |
返回:Boolean |
驗證德式的日期格式（29.04.1994 or 1.1.2006） |
|
number() |
返回:Boolean |
驗證十進制數字（包括小數的） |
|
digits() |
返回:Boolean |
驗證整數 |
|
creditcard() |
返回:Boolean |
驗證信用卡號 |
|
accept(extension) |
返回:Boolean |
驗證相同後綴名的字符串 |
|
equalTo(other) |
返回:Boolean |
驗證兩個輸入框的內容是否相同 |
|
phoneUS() |
返回:Boolean |
驗證美式的電話號碼 |
|
validate ()的可選項： |
|
|
debug:進行調試模式（表單不提交）: |
$(".selector").validate ({ debug:true }) |
|
把調試設置爲默認: |
$.validator.setDefaults({ debug:true }) |
|
submitHandler: 通過驗證後運行的函數,裏面要加上表單提交的函數,否則表單不會提交 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } }) |
|
ignore: 對某些元素不進行驗證 |
$("#myform").validate({ ignore:".ignore" }) |
|
rules: 自定義規則,key:value的形式,key是要驗證的元素,value可以是字符串或對象 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } } }) |
|
messages: 自定義的提示信息key:value的形式key是要驗證的元素,值是字符串或函數 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能爲空", email:{ required:"E-mail不能爲空", email:"E-mail地址不正確" } } }) |
|
groups: 對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯信息放在哪裏 |
$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true }) |
|
Onubmit Boolean 默認:true 是否提交時驗證 |
$(".selector").validate({ onsubmit:false }) |
|
onfocusout Boolean 默認:true 是否在獲取焦點時驗證 |
$(".selector").validate({ onfocusout:false }) |
|
onkeyup Boolean 默認:true 是否在敲擊鍵盤時驗證 |
$(".selector").validate({ onkeyup:false }) |
|
onclick Boolean 默認:true 是否在鼠標點擊時驗證（一般驗證checkbox,radiobox） |
$(".selector").validate({ onclick:false }) |
|
focusInvalid Boolean 默認:true 提交表單後,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點 |
$(".selector").validate({ focusInvalid:false }) |
|
focusCleanup Boolean 默認:false 當未通過驗證的元素獲得焦點時,並移除錯誤提示（避免和 focusInvalid.一起使用） |
$(".selector").validate({ focusCleanup:true }) |
|
errorClass String默認:"error" 指定錯誤提示的css類名,可以自定義錯誤提示的樣式 |
$(".selector").validate({ errorClass:"invalid" }) |
|
errorElement String 默認:"label" 使用什麼標籤標記錯誤 |
$(".selector").validate errorElement:"em" }) |
|
wrapper String 使用什麼標籤再把上邊的errorELement包起來 |
$(".selector").validate({ wrapper:"li" }) |
|
errorLabelContainer Selector 把錯誤信息統一放在一個容器裏面 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") } }) |
|
showErrors: 跟一個函數,可以顯示總共有多少個未通過驗證的元素 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); } }) |
|
errorPlacement: 跟一個函數,可以自定義錯誤放到哪裏 |
$("#myform").validate({ rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true }) |
|
success: 要驗證的元素通過驗證後的動作,如果跟一個字符串,會當做一個css類,也可跟一個函數 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } }) |
|
highlight: 可以給未通過驗證的元素加效果,閃爍等 |
|
|
addMethod(name,method,message)方法： |
|
參數name是添加的方法的名字 |
|
參數method是一個函數,接收三個參數(value,element,param) value是元素的值,element是元素本身 param是參數,我們可以用addMethod來添加除built-in Validation methods之外的驗證方法 比如有一個字段,只能輸一個字母,範圍是a-f,寫法如下: $.validator.addMethod("af",function(value,element,params){ if(value.length>1){ return false; } if(value>=params[0] && value<=params[1]){ return true; }else{ return false; } },"必須是一個字母,且a-f"); 用的時候,比如有個表單字段的id="username",則在rules中寫 username:{ af:["a","f"] } addMethod的第一個參數,就是添加的驗證方法的名子,這時是af addMethod的第三個參數,就是自定義的錯誤提示,這裏的提示爲:"必須是一個字母,且a-f" addMethod的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法 如果只有一個參數,直接寫,如果af:"a",那麼a就是這個唯一的參數,如果多個參數,用在[]裏,用逗號分開 |
|
meta String方式： |
|
$("#myform").validate({ meta:"validate", submitHandler:function() { alert("Submitted!") } }) |
|
<script type="text/javascript" src="js/jquery.metadata.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <form id="myform"> <input type="text" name="email" class="{validate:{ required:true,email:true }}" /> <input type="submit" value="Submit" /> </form> |
爲什麼要用jquery validate這個表單驗證插件：
form表單驗證是網站建設中前端必須要做的事情，自己寫一個通用沒有bug強大的jquery表單驗證插件並不容易，特別對新手和建站愛好者，有一個通用好用的表單驗證插件式必須的。
jquery validate這個jquery插件幾乎可以輕鬆應對95%以上的表單驗證，
jquery validate表單驗證如何調用？
一。引用jquery.min.js和jquery.validate.js
因爲jquery.validate.js是jquery插件所以必須要有jquery支持，現在沒有使用jquery的網站應該很少。如果你堅持不用jquery，很遺憾這個jquery.validate.js不適合你。
二、js調用代碼如下：
$(function(){
//$('.js-form') 是你的表單的類名或者 id，如果是id的話就是 $('#js-form')
//submitHandler 就是表單驗證通過的時候執行裏面的函數
$('.js-form').validate({
submitHandler: function (form) {
var $form = $(form),
data = $form.serialize(); //序列化表單數據
//這裏是jquery表單驗證通過的時候執行的操作，比如這裏，表單驗證通過的時候執行了jquery的ajax的post操作
$.post('js/test.json',{data:data},function(d){
if(d.Flag){
alert("如果返回爲真，將執行這裏代碼")
}else{
}
},'json');
}
});
}) jquery validate默認驗證規則的提示語中文化：
$.extend($.validator.messages, {
required: "必填",
remote: "請修正該字段",
email: "電子郵件格式不正確",
url: "網址格式不正確",
date: "日期格式不正確",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法後綴名的字符",
maxlength: $.validator.format("請輸入一個 長度最多是 {0} 的字符"),
minlength: $.validator.format("請輸入一個 長度最少是 {0} 的字符"),
rangelength: $.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字符"),
range: $.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: $.validator.format("請輸入一個最大爲{0} 的值"),
min: $.validator.format("請輸入一個最小爲{0} 的值")
});
validate默認的驗證規則中文解釋：
自定義validate表單驗證規則：
以郵箱驗證規則爲例：
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "郵箱格式不對");再多的文字說明都不如看演示來的直接，jquery validate表單驗證演示：
（懶人建站http://www.51xuediannao.com/整理）jquery validate中文API，僅供參考：(這個中文API有點老了，但是大部分依然適用)
|
名稱 |
返回類型 |
描述 |
|
validate(options) |
返回:Validator |
驗證所選的FORM |
|
valid() |
返回:Boolean |
檢查是否驗證通過 |
|
rules() |
返回:Options |
返回元素的驗證規則 |
|
rules("add",rules) |
返回:Options |
增加驗證規則 |
|
rules("remove",rules) |
返回:Options |
刪除驗證規則 |
|
removeAttrs(attributes) |
返回:Options |
刪除特殊屬性並且返回他們 |
|
Custom selectors |
||
|
:blank |
返回:Validator |
沒有值的篩選器 |
|
:filled |
返回:Array <Element > |
有值的篩選器 |
|
:unchecked |
返回:Array <Element > |
沒選擇的元素的篩選器 |
|
Utilities |
||
|
jQuery.format (template,argument ,argumentN...) |
返回:String |
用參數代替模板中的 {n} |
|
Validator: |
||
|
validate方法返回一個Validator對象,它有很多方法, 讓你能使用引發校驗程序或者改變form的內容. validator對象有很多方法,但下面只是列出常用的 |
||
|
form() |
返回:Boolean |
驗證form返回成功還是失敗 |
|
element(element) |
返回:Boolean |
驗證單個元素是成功還是失敗 |
|
resetForm() |
返回:undefined |
把前面驗證的FORM恢復到驗證前原來的狀態 |
|
showErrors(errors) |
返回:undefined |
顯示特定的錯誤信息 |
|
Validator functions: |
||
|
setDefaults(defaults) |
返回:undefined |
改變默認的設置 |
|
addMethod(name,method,message) |
返回:undefined |
添加一個新的驗證方法. 必須包括一個獨一無二的名字,一個JAVASCRIPT的方法和一個默認的信息 |
|
addClassRules(name,rules) |
返回:undefined |
增加組合驗證類型 在一個類裏面用多種驗證方法裏比較有用 |
|
addClassRules(rules) |
返回:undefined |
增加組合驗證類型 在一個類裏面用多種驗證方法裏比較有用,這個是一下子加多個 |
|
內置驗證方式： |
||
|
required() |
返回:Boolean |
必填驗證元素 |
|
required(dependency-expression) |
返回:Boolean |
必填元素依賴於表達式的結果 |
|
required(dependency-callback) |
返回:Boolean |
必填元素依賴於回調函數的結果 |
|
remote(url) |
返回:Boolean |
請求遠程校驗。url通常是一個遠程調用方法 |
|
minlength(length) |
返回:Boolean |
設置最小長度 |
|
maxlength(length) |
返回:Boolean |
設置最大長度 |
|
rangelength(range) |
返回:Boolean |
設置一個長度範圍[min,max] |
|
min(value) |
返回:Boolean |
設置最大值 |
|
max(value) |
返回:Boolean |
設置最小值 |
|
email() |
返回:Boolean |
驗證電子郵箱格式 |
|
range(range) |
返回:Boolean |
設置值的範圍 |
|
url() |
返回:Boolean |
驗證URL格式 |
|
date() |
返回:Boolean |
驗證日期格式(類似30/30/2008的格式,不驗證日期準確性只驗證格式) |
|
dateISO() |
返回:Boolean |
驗證ISO類型的日期格式 |
|
dateDE() |
返回:Boolean |
驗證德式的日期格式（29.04.1994 or 1.1.2006） |
|
number() |
返回:Boolean |
驗證十進制數字（包括小數的） |
|
digits() |
返回:Boolean |
驗證整數 |
|
creditcard() |
返回:Boolean |
驗證信用卡號 |
|
accept(extension) |
返回:Boolean |
驗證相同後綴名的字符串 |
|
equalTo(other) |
返回:Boolean |
驗證兩個輸入框的內容是否相同 |
|
phoneUS() |
返回:Boolean |
驗證美式的電話號碼 |
|
validate ()的可選項： |
|
|
debug:進行調試模式（表單不提交）: |
$(".selector").validate ({ debug:true }) |
|
把調試設置爲默認: |
$.validator.setDefaults({ debug:true }) |
|
submitHandler: 通過驗證後運行的函數,裏面要加上表單提交的函數,否則表單不會提交 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } }) |
|
ignore: 對某些元素不進行驗證 |
$("#myform").validate({ ignore:".ignore" }) |
|
rules: 自定義規則,key:value的形式,key是要驗證的元素,value可以是字符串或對象 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } } }) |
|
messages: 自定義的提示信息key:value的形式key是要驗證的元素,值是字符串或函數 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能爲空", email:{ required:"E-mail不能爲空", email:"E-mail地址不正確" } } }) |
|
groups: 對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯信息放在哪裏 |
$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true }) |
|
Onubmit Boolean 默認:true 是否提交時驗證 |
$(".selector").validate({ onsubmit:false }) |
|
onfocusout Boolean 默認:true 是否在獲取焦點時驗證 |
$(".selector").validate({ onfocusout:false }) |
|
onkeyup Boolean 默認:true 是否在敲擊鍵盤時驗證 |
$(".selector").validate({ onkeyup:false }) |
|
onclick Boolean 默認:true 是否在鼠標點擊時驗證（一般驗證checkbox,radiobox） |
$(".selector").validate({ onclick:false }) |
|
focusInvalid Boolean 默認:true 提交表單後,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點 |
$(".selector").validate({ focusInvalid:false }) |
|
focusCleanup Boolean 默認:false 當未通過驗證的元素獲得焦點時,並移除錯誤提示（避免和 focusInvalid.一起使用） |
$(".selector").validate({ focusCleanup:true }) |
|
errorClass String默認:"error" 指定錯誤提示的css類名,可以自定義錯誤提示的樣式 |
$(".selector").validate({ errorClass:"invalid" }) |
|
errorElement String 默認:"label" 使用什麼標籤標記錯誤 |
$(".selector").validate errorElement:"em" }) |
|
wrapper String 使用什麼標籤再把上邊的errorELement包起來 |
$(".selector").validate({ wrapper:"li" }) |
|
errorLabelContainer Selector 把錯誤信息統一放在一個容器裏面 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") } }) |
|
showErrors: 跟一個函數,可以顯示總共有多少個未通過驗證的元素 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); } }) |
|
errorPlacement: 跟一個函數,可以自定義錯誤放到哪裏 |
$("#myform").validate({ rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true }) |
|
success: 要驗證的元素通過驗證後的動作,如果跟一個字符串,會當做一個css類,也可跟一個函數 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } }) |
|
highlight: 可以給未通過驗證的元素加效果,閃爍等 |
|
|
addMethod(name,method,message)方法： |
|
參數name是添加的方法的名字 |
|
參數method是一個函數,接收三個參數(value,element,param) value是元素的值,element是元素本身 param是參數,我們可以用addMethod來添加除built-in Validation methods之外的驗證方法 比如有一個字段,只能輸一個字母,範圍是a-f,寫法如下: $.validator.addMethod("af",function(value,element,params){ if(value.length>1){ return false; } if(value>=params[0] && value<=params[1]){ return true; }else{ return false; } },"必須是一個字母,且a-f"); 用的時候,比如有個表單字段的id="username",則在rules中寫 username:{ af:["a","f"] } addMethod的第一個參數,就是添加的驗證方法的名子,這時是af addMethod的第三個參數,就是自定義的錯誤提示,這裏的提示爲:"必須是一個字母,且a-f" addMethod的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法 如果只有一個參數,直接寫,如果af:"a",那麼a就是這個唯一的參數,如果多個參數,用在[]裏,用逗號分開 |
|
meta String方式： |
|
$("#myform").validate({ meta:"validate", submitHandler:function() { alert("Submitted!") } }) |
|
<script type="text/javascript" src="js/jquery.metadata.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <form id="myform"> <input type="text" name="email" class="{validate:{ required:true,email:true }}" /> <input type="submit" value="Submit" /> </form> |