-
example查看全部
-
表單驗(yàn)證插件查看全部
-
自定義驗(yàn)證方法 $.validator.addMethod(name,method,[message]) name:方法名稱 method: function(value,element,params) // value是我們填寫的值,element是填寫的那個(gè)元素例如username,params是傳入的參數(shù),就是在設(shè)置自定義規(guī)則的時(shí)候?qū)懙?message:錯(cuò)誤的提示信息查看全部
-
validation自帶的選擇器查看全部
-
showErrors:function(errorMap,errorList){ // 顯示錯(cuò)誤信息,Map顯示內(nèi)容比較簡(jiǎn)單,List比較詳細(xì) console.log(errorMap); console.log(errorList); this.defaultShowErrors(); // 是否用默認(rèn)的錯(cuò)誤提示方式 } success:function(label){ // 驗(yàn)證成功后,執(zhí)行的操作,每一個(gè)驗(yàn)證都執(zhí)行 label.addClass("right"); } highlight:function(element,errorClass,validClass){ $(element).addClass(errorClass).removeClass(validClass); // 給沒(méi)有通過(guò)驗(yàn)證的element元素,加上類名,去掉類名 } unhighlight:function(element,errorClass,validClass){ $(element).addClass(validClass).removeClass(errorClass); // 給通過(guò)驗(yàn)證的element元素,加上類名,去掉類名 }查看全部
-
onsubmit:true // 是否在提交時(shí)驗(yàn)證 onfocusout:true // 是否在獲取焦點(diǎn)時(shí)驗(yàn)證 onkeyup:true // 是否在敲擊鍵盤的時(shí)候驗(yàn)證 onclick // 是否在鼠標(biāo)點(diǎn)擊的時(shí)候驗(yàn)證,一般用于checkbox或者radio focusInvalid:true // 提交表單后,未通過(guò)驗(yàn)證的表單,是否會(huì)獲得焦點(diǎn) focusCleanup:true // 未通過(guò)的表單獲得焦點(diǎn)時(shí),是否移除錯(cuò)誤信息提示 errorClass:"txt" // 指定錯(cuò)誤提示的css類名,可以自定義錯(cuò)誤提示的樣式 validClass:"txt" // 制定驗(yàn)證通過(guò)的css類名 errorElement:"li" // 使用什么標(biāo)簽標(biāo)記錯(cuò)誤,默認(rèn)是label標(biāo)簽 wrapper:"ul" // 使用什么標(biāo)簽包裹上面的錯(cuò)誤信息 errorLabelContainer:"#info" // 把以上的errorElement和wrapper信息放在哪個(gè)容器里 errorContainer:"#info2" // 自定義容器info2,當(dāng)有錯(cuò)誤信息的時(shí)候容器顯示,沒(méi)有錯(cuò)誤信息的時(shí)候容器隱藏查看全部
-
ignore 對(duì)某些元素不進(jìn)行驗(yàn)證 每一個(gè)規(guī)則中都有depends方法,depends方法成立才能執(zhí)行規(guī)則 groups 對(duì)一組元素進(jìn)行驗(yàn)證,用一個(gè)錯(cuò)誤提示,用errorPlacement把錯(cuò)誤信息放在一個(gè)地方 $("#demoForm").validate({ .... ignore:"#username" // 不對(duì)username進(jìn)行校驗(yàn) }) rules:{ username:{ required:{ depends:function(element){ return $("#password").is(":filled"); // 判斷密碼是否被填寫,返回true或 者false,判斷depends成立不成立 } } }, minlength:{ param:2, // depends成立,param才能被傳入 depends:...... } } groups:{ login:"username password" // 把username、password組成一個(gè)組 } errorPlacement:function(error,element){ error.insertBefore("#...") // 將groups組成的錯(cuò)誤信息,顯示在這個(gè)地方 }查看全部
-
submitHandler // 通過(guò)驗(yàn)證后運(yùn)行的函數(shù),可以加上表單提交的方法 invalidHandler // 無(wú)效表單提交后運(yùn)行的函數(shù) $("#form").validate({ .... submitHandler:function(form){ // 一個(gè)參數(shù),表單 console.log($("form").serialize()) } }) $("#form").validate({ .... invalidHandler:function(event,validator){ // 兩個(gè)參數(shù),事件和validator對(duì)象 console.log(...) } }) invalidHandler也可以通過(guò)event調(diào)用 $("#demoForm").on("invalid-form",function(event,validator){...})查看全部
-
validator對(duì)象靜態(tài)調(diào)用方法 var a = $.validator.format("{0}-{1}-{2}") // 自動(dòng)轉(zhuǎn)換為字符串 a("你","我","他") // 按照f(shuō)ormat格式轉(zhuǎn)換為字符串 你-我-他 a(["你","我"]) // 數(shù)組放在第一個(gè),同樣按照兩個(gè)內(nèi)容轉(zhuǎn)換,第三個(gè)內(nèi)容找不到,如果數(shù)組放在第二個(gè),則整個(gè)數(shù)組當(dāng)作一個(gè)內(nèi)容 $.validator.setDefaults({debug:true}) // 默認(rèn)的為每一個(gè)都加上規(guī)則debug:true $.validator.addClassRules({txt:{required:true,min:2}}) // 為所有Class名叫做txt的元素都加上規(guī)則查看全部
-
validator對(duì)象 var validator = $("#demoForm").validate // 通過(guò)validate方法,就可以返回一個(gè)validator對(duì)象 validator.form() // 驗(yàn)證表單是否有效 validator.element("#username") // 驗(yàn)證username是否有錯(cuò)誤 validator.resetForm() // 把表單回復(fù)到驗(yàn)證前的狀態(tài) validator.showErrors({username:"你填錯(cuò)了"}) // 動(dòng)態(tài)的為username加上錯(cuò)誤信息,可以加多個(gè) validator.numberOfInvalids() // 返回當(dāng)前無(wú)效的元素的數(shù)量查看全部
-
valid()方法 $("demoForm").valid()?"填寫正確":"填寫錯(cuò)誤" // valid方法返回true或者false,判斷填寫正確與否 rules()方法 $("#username").rules() // 返回username的所有方法,只能針對(duì)一個(gè)屬性,不能針對(duì)例如demoForm $("#username").rules("add",{min:2,max:10}) // 為username增加規(guī)則 $("#username").rules("remove","min max") // 為username刪除規(guī)則,只需要填寫規(guī)則名字查看全部
-
基本驗(yàn)證方法查看全部
-
validate()方法配置項(xiàng) onsubmit:是否在提交時(shí)驗(yàn)證,默認(rèn)值為true onfoucusout:是否在獲取焦時(shí)驗(yàn)證 onkeyup:是否在敲擊鍵盤時(shí)驗(yàn)證 onclick:是否在鼠標(biāo)點(diǎn)擊時(shí)驗(yàn)證,一般用于checkbox或者radio focusInvalid:提交表單后,未通過(guò)驗(yàn)證的表單(第一個(gè)或提交之前獲得焦點(diǎn)的未通過(guò)驗(yàn)證的 表單)是否會(huì)獲得焦點(diǎn) focusCleanup:當(dāng)未通過(guò)驗(yàn)證的元素獲得焦點(diǎn)時(shí),是否移除錯(cuò)誤提示 errorClass:指定錯(cuò)誤提示的css類名,可以自定義錯(cuò)誤提示的樣式 validClass:指定驗(yàn)證通過(guò)的css類名 errorElement:使用什么標(biāo)簽標(biāo)記錯(cuò)誤 wrapper:使用什么標(biāo)簽把上邊的errorElement包起來(lái) errorLaberContainer:把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面 errorContainer:顯示或者隱藏驗(yàn)證信息,可以自動(dòng)實(shí)現(xiàn)有錯(cuò)誤信息出現(xiàn)時(shí)把容器屬性變?yōu)轱@示,無(wú)錯(cuò)誤時(shí)隱藏。查看全部
-
rules中的校驗(yàn)方法都可以定義depends屬性,表示當(dāng)條件滿足時(shí)返回true,則執(zhí)行校驗(yàn)方法 針對(duì)參數(shù)為boolean類型的校驗(yàn)方法: required:{ //只有depends:function(element)返回true,required校驗(yàn)方法才起作用 depends:function(element){ //:filled是Validation自帶的選擇器,匹配填寫內(nèi)容的元素 return $("#password").is(":filled") } } 針對(duì)參數(shù)為非boolean類型的校驗(yàn)方法如下: maxlength:{ param:2 //只有depends:function(element)返回true,maxlength校驗(yàn)方法的值才設(shè)置為2 depends:function(element){ //:filled是Validation自帶的選擇器,匹配填寫內(nèi)容的元素 return $("#password").is(":filled") } } } groups的使用如下: groups:{login:"username password confirm-password"} //對(duì)一組元素進(jìn)行驗(yàn)證 errorPlacement:function(error,element){ //對(duì)一組元素驗(yàn)證后錯(cuò)誤信息顯示 error.insertBefore("#info");//將一組元素的錯(cuò)誤信息都顯示在id="info"的元素上 }查看全部
-
validate()方法配置項(xiàng)是validate插件的核心內(nèi)容 submitHandler通過(guò)驗(yàn)證后運(yùn)行的函數(shù),可以加上表單提交方法 invalidHandler無(wú)效表單提交后運(yùn)行的函數(shù) ignore對(duì)某些元素不進(jìn)行驗(yàn)證 rules定義校驗(yàn)規(guī)則 messages定義提示信息 groups對(duì)一組元素的驗(yàn)證,用一個(gè)錯(cuò)誤提示,用errorPlacement控制把出錯(cuò)信息放在那實(shí)例調(diào)用: submitHandler:function(from){ //表單提交的方式 from:submit();//$(form).Ajax.submit();//$ajax等方式提交表單 } invalidHandler:function(event,validator){ //event:無(wú)效驗(yàn)證觸發(fā)的事件 //validator:對(duì)象 }也可以寫一個(gè)事件來(lái)觸發(fā) $("選擇器屬性值").on("事件名",function(event,validator)){查看全部
舉報(bào)
0/150
提交
取消