validate方法
validate方法中rules驗(yàn)證的是表單元素的name字段飒炎。默認(rèn)提示信息是英文，可通過messages配置項(xiàng)修改提示信息。
// 捕獲validato對(duì)象
var validator=$("#demoform").validate({
// debug:true,
// 驗(yàn)證規(guī)則
// 驗(yàn)證的是表單元素的name字段
rules:{
username:{
required:true,
minlength:2,
maxlength:10,
// email:true,
// url:true,
// date:true,
// 值可以是一個(gè)url湾揽，url內(nèi)容是后臺(tái)返回的數(shù)據(jù)旅挤，默認(rèn)會(huì)向后臺(tái)發(fā)送一個(gè)get請(qǐng)求
// remote:"remote/remote.json"
// 也可以是一個(gè)配置對(duì)象
remote:{
url:"remote/remote.json",
type:"post",
data:{
loginTime:function(){
return +new Date();
}
}
}
},
password:{
required:true,
minlength:2,
maxlength:16
},
// 因?yàn)閏onfirm-password有橫杠踢关，所以要用引號(hào)包裹
"confirm-password":{
// 值為關(guān)聯(lián)的選擇器
equalTo:"#password"
}
},
// 默認(rèn)英文，通過下面的設(shè)置修改提示信息
messages:{
username:{
required:"必須填寫用戶名",
minlength:"用戶名最少兩個(gè)字符粘茄，最多10個(gè)字符",
maxlength:"用戶名最少兩個(gè)字符签舞，最多10個(gè)字符",
remote:"用戶名不存在"
},
password:{
required:"必須填寫密碼",
minlength:"密碼最少兩個(gè)字符，最多16個(gè)字符",
maxlength:"密碼最少兩個(gè)字符柒瓣，最多16個(gè)字符"
},
"confirm-password":{
equalTo:"兩次輸入的密碼不一致"
}
}
})
$("#check").click(function(){
alert($("#demoform").valid()?"填寫正確":"填寫錯(cuò)誤")
})
debug：true儒搭，頁面只進(jìn)行驗(yàn)證，不進(jìn)行提交芙贫。
基本驗(yàn)證方法：
required必填
remote遠(yuǎn)程校驗(yàn)
minlength最小長度
maxlength最大長度
rangelength長度范圍
min最小值
max最大值
range值范圍
email Email格式
url url格式
date日期
dateISO ISO日期
number數(shù)字
digits非負(fù)整數(shù)
equalTo與另一個(gè)元素值相等
remote:值可以是一個(gè)url师妙，url內(nèi)容是后臺(tái)返回的數(shù)據(jù)；默認(rèn)會(huì)向后臺(tái)發(fā)送一個(gè)get請(qǐng)求屹培。也可以是一個(gè)配置對(duì)象默穴，例如：
remote:{
url:"remote/remote.json",
//請(qǐng)求類型
type:"post",
//請(qǐng)求攜帶的數(shù)據(jù)
data:{
loginTime:function(){return +new Date();}
}
}
+new Date()是簡略寫法，得到long型的毫秒褪秀，等同于new Date().getTime();url :輸入的是url格式蓄诽，需帶有http或者h(yuǎn)ttps前綴
date:輸入的是日期，需要能夠被Date.parse()識(shí)別轉(zhuǎn)化.例如：2018-1-12
dateISO：輸入的ISO日期媒吗，yyyy-mm-dd
email仑氛、url、date闸英、dateISO锯岖、number、digits配置時(shí)值一般設(shè)為true甫何。
equalTo:例如確認(rèn)密碼
對(duì)應(yīng)的jq:
$("#demoform").validate(
{
rules:{
username:{
required:true,
minlength:2,
maxlength:10,
remote:{
url:"remote/remote.json",
type:"post",
data:{
loginTime:function(){
return +new Date();
}
}
}
},
password:{
required:true,
minlength:2,
maxlength:16
},
// 因?yàn)閏onfirm-password有橫杠出吹，所以要用引號(hào)包裹
"confirm-password":{
// 值為關(guān)聯(lián)的選擇器，判斷輸入內(nèi)容是否與該選擇器的值相等
equalTo:"#password"
}
},
// 默認(rèn)英文辙喂，通過下面的設(shè)置修改提示信息
messages:{
username:{
required:"必須填寫用戶名",
minlength:"用戶名最少兩個(gè)字符捶牢，最多10個(gè)字符",
maxlength:"用戶名最少兩個(gè)字符鸠珠，最多10個(gè)字符",
remote:"用戶名不存在"
},
password:{
required:"必須填寫密碼",
minlength:"密碼最少兩個(gè)字符，最多16個(gè)字符",
maxlength:"密碼最少兩個(gè)字符秋麸，最多16個(gè)字符"},
"confirm-password":{
equalTo:"兩次輸入的密碼不一致"
}
}
})
valid（）方法
檢查表單或者某些元素是否有效渐排，返回true（正確）或false（有誤）.
用法示例：在表單中添加一個(gè)button，用來檢測表單元素的值是否有效
對(duì)應(yīng)的jq:
$("#check").click(function(){
alert($("#demoform").valid()?"填寫正確":"填寫錯(cuò)誤")
})
rules()方法
rules(); 獲取表單元素（表單里的某個(gè)元素灸蟆，而不是表單）的校驗(yàn)規(guī)則
rules("add",rules}; 向表單元素增加校驗(yàn)規(guī)則
rules("remove",rules); 刪除表單元素校驗(yàn)規(guī)則
例：獲取表單元素#username的校驗(yàn)規(guī)則：
$("#username").rules()
添加規(guī)則：
$("#username").rules("add",{min:2,max:10});
刪除規(guī)則
$("#username").rules("remove","minlengt");
$("#username").rules("remove","minlength maxlength");
注意驯耻，rules("remove",rules)方法中，第二個(gè)參數(shù)是校驗(yàn)規(guī)則的名稱炒考，如上文的minlength可缚，用引號(hào)包裹；如果同時(shí)刪除多個(gè)規(guī)則票腰，規(guī)則之間用空格隔開城看。
Validator對(duì)象
validate方法返回Validator對(duì)象，Validator的一些方法如下：
Validator.form()驗(yàn)證表單是否有效杏慰，返回true/false
Validator.element(element)驗(yàn)證某個(gè)元素是否有效测柠，返回true/false(括號(hào)里的element是要驗(yàn)證的元素的選擇器名稱)
Validator.resetForm()把表單恢復(fù)到驗(yàn)證前的狀態(tài)
Validator.showErrors(errors)針對(duì)某個(gè)元素顯示特定的錯(cuò)誤信息
Validator.numberOfInvalids()返回?zé)o效的元素?cái)?shù)量
捕獲validato對(duì)象:
var validator=$("#demoform").validate({...});//冒號(hào)代替省略了的具體內(nèi)容，使用時(shí)不能這樣寫哦
方法使用示例：
validator.form();
validator.element("#username");
validator.resetForm();//使用此方法后缘滥，表單恢復(fù)到驗(yàn)證前的狀態(tài)轰胁，驗(yàn)證提示的錯(cuò)誤信息就會(huì)被清除掉
validator.showErrors({username:"你填錯(cuò)了，哈哈"})//注意：errors是一個(gè)對(duì)象朝扼，key是表單的某個(gè)元素的name字段赃阀；當(dāng)該表單元素輸入的內(nèi)容不符合驗(yàn)證規(guī)則時(shí)就會(huì)顯示該對(duì)象里設(shè)置的value；可配置多項(xiàng)擎颖，如下：validator.showErrors({username:"你填錯(cuò)了榛斯，哈哈",password:"密碼也錯(cuò)了"})
validator.numberOfInvalids();//返回?zé)o效的元素?cái)?shù)量
validate()方法配置項(xiàng)
submitHandler：通過驗(yàn)證后運(yùn)行的函數(shù)，可以加上表單提交的方法
submitHandler函數(shù)的參數(shù)是form這個(gè)dom對(duì)象搂捧。使用該函數(shù)必須傳參form,否則函數(shù)無效驮俗；如果驗(yàn)證失敗，則該函數(shù)也不會(huì)被觸發(fā)允跑。例：
submitHandler:function(form){
// form.submit();
console.log($(form).serialize());
}
invalidHandler：無效表單提交后運(yùn)行的函數(shù)
該函數(shù)有兩個(gè)參數(shù)王凑，第一個(gè)參數(shù)event代表無效觸發(fā)的事件，第二個(gè)參數(shù)是validator對(duì)象聋丝。
例：
invalidHandler:function(event,validator){
console.log("錯(cuò)誤數(shù)："+validator.numberOfInvalids())
}
對(duì)于invalidHandler這個(gè)函數(shù)索烹，可以單獨(dú)從validator對(duì)象中拿出來，表達(dá)如下：
$("#demoform").on("invalid-form",function(event,validator){
console.log("錯(cuò)誤數(shù)："+validator.numberOfInvalids())
});
//invalid-form后面可以打點(diǎn)添加自定義事件弱睦，如invalid-form.valid百姓、invalid-form.adw，都是可以被觸發(fā)的每篷，但前提是必須寫了invalid-form
ignore對(duì)某些元素不進(jìn)行驗(yàn)證瓣戚，它的值是選擇器
例：
ignore:"#username"http://不校驗(yàn)用戶名
當(dāng)省略ignore配置項(xiàng)時(shí)其實(shí)ignore有一個(gè)默認(rèn)值 ==ignore:":hidden"==端圈，表示不對(duì)隱藏元素進(jìn)行校驗(yàn)焦读。
var validator=$("#demoform").validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:16
},
"confirm-password":{
equalTo:"#password"
}
},
messages:{
username:{
required:"必須填寫用戶名",
minlength:"用戶名最少兩個(gè)字符子库，最多10個(gè)字符",
maxlength:"用戶名最少兩個(gè)字符，最多10個(gè)字符",
},
password:{
required:"必須填寫密碼",
minlength:"密碼最少兩個(gè)字符矗晃，最多16個(gè)字符",
maxlength:"密碼最少兩個(gè)字符仑嗅，最多16個(gè)字符"
},
"confirm-password":{
equalTo:"兩次輸入的密碼不一致"
}
},
submitHandler:function(form){
// form.submit();
console.log($(form).serialize());
},
invalidHandler:function(event,validator){
console.log("錯(cuò)誤數(shù)："+validator.numberOfInvalids())
}
}
rules定義校驗(yàn)規(guī)則
rules:{
username:{
required:{
//depends定義校驗(yàn)規(guī)則應(yīng)用的條件，只有當(dāng)depends函數(shù)返回true時(shí)required才生效
// 如：
depends:function(element){
// 填了密碼用戶名才是必填的
return $("#password").is(":filled");
}
},
// 最小長度是2
minlength:{
param:2,
depends:function(element){
return $("#password").is(":filled");
}
}
}
}
messages定義提示信息
groups對(duì)一組元素的驗(yàn)證张症，用一個(gè)錯(cuò)誤提示仓技，用errorPlacement控制把出錯(cuò)信息放在哪里。
即用groups進(jìn)行配置俗他，把一堆的錯(cuò)誤信息合并到一處;由errorPlacement控制把出錯(cuò)信息放在哪兒脖捻。
groups:{
// login:配置的錯(cuò)誤信息名稱（自定義），值是包含的元素
login:"username password confirm-password"
},
errorPlacement:function(error,element){
error.insertBefore("#info");
}
onsubmit：是否在提交時(shí)驗(yàn)證兆衅，默認(rèn)值true
onfocusout：是否在獲取焦點(diǎn)時(shí)驗(yàn)證
onkeyup：是否在敲擊鍵盤時(shí)驗(yàn)證
onclick：是否在鼠標(biāo)點(diǎn)擊時(shí)驗(yàn)證地沮，一般用于checkbox或者radio
focusInvalid：提交表單后，未通過驗(yàn)證的表單（它的第一個(gè)或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單元素）是否會(huì)獲得焦點(diǎn)
focusCleanup：當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)羡亩，是否移除錯(cuò)誤提示摩疑。
errorClass：指定錯(cuò)誤提示的css類名，可以自定義錯(cuò)誤提示的樣式畏铆，默認(rèn)error
validClass：指定驗(yàn)證通過的css類名雷袋，默認(rèn)valid
errorElement：用什么標(biāo)簽標(biāo)記錯(cuò)誤，默認(rèn)label標(biāo)簽
wrapper：使用什么標(biāo)簽把上面的errorElemnt包起來
errorLabelContainer：把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面
errorContainer：顯示或隱藏驗(yàn)證信息辞居，可以自動(dòng)實(shí)現(xiàn)有錯(cuò)誤信息出現(xiàn)時(shí)把容器屬性變?yōu)轱@示楷怒，無錯(cuò)誤時(shí)隱藏
errorElement:"li",
wrapper:"ul",
errorLabelContainer:"#info",
errorContainer:"#info"
showErrors：可顯示總共有多少個(gè)未通過驗(yàn)證的元素；
一般用來進(jìn)行自定義錯(cuò)誤信息的展示處理瓦灶。
showErrors:function(errorMap,errorList){
console.log(errorMap);
console.log(errorList);
// 調(diào)用默認(rèn)的錯(cuò)誤信息展示方式;一旦配置了showErrors鸠删，如果不調(diào)用，就不顯示錯(cuò)誤信息
// this.defaultShowErrors();
}
errorPlacement：自定義錯(cuò)誤信息放到哪里
success：要驗(yàn)證的表單元素（提示信息的標(biāo)簽）通過驗(yàn)證后的動(dòng)作
// 如果是一個(gè)字符串倚搬，則給驗(yàn)證通過的提示信息一個(gè)類名
// success:"right"
// 也可以是一個(gè)方法
success:function(label){
label.addClass("right");
}
highlight:可以給未通過驗(yàn)證的元素加效果
unhighlight：去除未通過驗(yàn)證的元素的效果冶共，一般和highlight同時(shí)使用
這兩個(gè)屬性針對(duì)的是表單的input。
highlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
},
unhighlight:function(element,errorClass,validClass){
$(element).addClass(validClass).removeClass(errorClass);
}
選擇器擴(kuò)展
:blank選擇所有值為空的元素
:filled選擇所有值不為空的元素
:unchecked選擇所有沒有被選中的元素每界，一般用于復(fù)選框
自定義驗(yàn)證方法
jQuery.validator.addMethod(name,method,message)
name：方法名稱
method：function(value,element,params){
//value：被驗(yàn)證的表單元素的值
//element：被驗(yàn)證的表單元素
//params：比如最小長度為2捅僵，有需要就寫，沒有需要就不寫
}方法邏輯</br>
message：提示信息眨层，可有可無
$.validator.addMethod("postcode",function(value,element,params){
var postcode=/^[0-9]{6}$/;
// return this.optional(element) ||(postcode.test(value));
// 自定義驗(yàn)證方法時(shí)庙楚，如果表單控件的值不為空的時(shí)候才觸發(fā)驗(yàn)證方法，就需要加上this.optional(element)
// this.optional(element),該項(xiàng)輸入內(nèi)容不為空時(shí)才觸發(fā)驗(yàn)證趴樱；假如postcode這一項(xiàng)沒輸入內(nèi)容馒闷，則this.optional(element)直接返回true酪捡，不進(jìn)行驗(yàn)證
// 當(dāng)該控件為必填項(xiàng)時(shí)，就必須要驗(yàn)證value符合postcode纳账，這個(gè)時(shí)候就要去掉this.optional(element)
return postcode.test(value);
},"請(qǐng)正確填寫郵政編碼逛薇！");
國際化-中文：
