JQuery筆記(表單驗(yàn)證)

1、JQuery筆記（表單驗(yàn)證）jquery.validate.js是jquery旗下的一個(gè)驗(yàn)證插件，借助jquery的優(yōu)勢(shì)，我們可以迅速驗(yàn)證一些常見的輸入，并且可以自己擴(kuò)充自己的驗(yàn)證方法。舉個(gè)例子，有這么一個(gè)表單：viewplaincopytoclipboardprint?ValidatingacompleteformFirstnameLastnameUsernamePasswordConfirmpasswordEmailValidatingacompleteformFirstnameLastnameUsernamePasswordConfirmpasswordEmail在這個(gè)表單中，有名、姓、

2、用戶名、密碼、確認(rèn)密碼和email。他們都為非空，并且電子郵件需要是格式正確的地址、確認(rèn)密碼和密碼一致。使用jQuery驗(yàn)證最簡(jiǎn)單的方式是引入jquery.js和jqueryvalidation.js兩個(gè)js文件。然后分別在input中加入classviewplaincopytoclipboardprint?以下列出validate自帶的默認(rèn)驗(yàn)證required:必選字段,remote:請(qǐng)修正該字段,email:請(qǐng)輸入正確格式的電子郵件,url:請(qǐng)輸入合法的網(wǎng)址,date:請(qǐng)輸入合法的日期,dateISO:請(qǐng)輸入合法的日期（ISO）.,number:請(qǐng)輸入合法的數(shù)字,digits:只能輸入整數(shù)

3、,creditcard:請(qǐng)輸入合法的信用卡號(hào),equalTo:請(qǐng)?jiān)俅屋斎胂嗤闹?accept:請(qǐng)輸入擁有合法后綴名的字符串,maxlength:jQuery.format（請(qǐng)輸入一個(gè)長(zhǎng)度最多是0的字符串），minlength:jQuery.format（請(qǐng)輸入一個(gè)長(zhǎng)度最少是0的字符串），rangelength:jQuery.format（請(qǐng)輸入一個(gè)長(zhǎng)度介于0和1之間的字符串）,range:jQuery.format（請(qǐng)輸入一個(gè)介于0和1之間的值），max:jQuery.format（請(qǐng)輸入一個(gè)最大為0的值）,min:jQuery.format（請(qǐng)輸入一個(gè)最小為0的值）然后，在document

4、的read事件中，加入如下方法：$(document).ready(function()$(#signupForm).validate();)指定的class來(lái)進(jìn)行驗(yàn)證了。如果失敗,input的后面。這樣，當(dāng)form被提交的時(shí)候，就會(huì)根據(jù)inputform的提交就會(huì)被阻止。并且，將提示信息顯示在不過(guò)，這樣感覺(jué)不好，因?yàn)轵?yàn)證規(guī)則侵入了我們的“rules。我們將input的那些驗(yàn)證用class件響應(yīng)代碼：html代碼。還有一個(gè)方式，便是使用刪除掉。然后修改document的ready事$(document).ready(function()$(#signupForm).validate(rules

5、:firstname:required,lastname:required,username:required,password:required,confirm_password:required:true,equalTo:#password),email:required:true,email:true);)這樣以來(lái)，也能達(dá)到相同的效果。那么，接下的問(wèn)題，就是顯示的錯(cuò)誤提示是默認(rèn)的。我們需要使用自定義的提示:$(document).ready(function()$(#signupForm).validate(rules:firstname:required,lastname:requir

6、ed,username:required,password:required,confirm_password:required:true,equalTo:#password,email:required:true,email:true,messages:firstname:必填項(xiàng),lastname:必填項(xiàng)username:必填項(xiàng)password:必填項(xiàng),confirm_password:required:必填項(xiàng),equalTo:密碼不一致),email:required:必填項(xiàng),email:格式有誤);)如果你還想在錯(cuò)誤信息上顯示特別的樣式(比如字體為紅色)即可通過(guò)添加:#signupFor

7、mlabel.errorpadding-left:16px;margin-left:2px;color:red;background:url(img/unchecked.gif)no-repeat0px0px;繼續(xù)添加對(duì)輸入密碼長(zhǎng)度的驗(yàn)證規(guī)則:$(document).ready(function()$(#signupForm).validate(rules:firstname:required,lastname:required,username:required,password:required:true,minlength:4,maxlength:15,confirm_password:

8、required:true,equalTo:#password,email:required:true,email:true,messages:firstname:必填項(xiàng),lastname:必填項(xiàng),username:必填項(xiàng),password:required:必填項(xiàng),minlength:jQuery.format（密碼長(zhǎng)度不少于0位）,maxlength:jQuery.format（密碼長(zhǎng)度不超過(guò)0位）,confirm_password:required:必填項(xiàng),equalTo:密碼不一致,email:required:必填項(xiàng),email:格式有誤）;）使用remote當(dāng)控件失可以通過(guò)even

9、t指定觸發(fā)效驗(yàn)方式（可選值有keyup（每次按鍵時(shí)），blur（去焦點(diǎn)時(shí)），不指定時(shí)就只在按提交按鈕時(shí)觸發(fā)）$(document).ready(function()$(#signupForm).validate(event:keyup|blur)如果通過(guò)指定debug為true則表單不會(huì)提交只能用來(lái)驗(yàn)證(默認(rèn)為提交)試$(document).ready(function()$(#signupForm).validate(debug:true)如果在提交前還需要進(jìn)行一些自定義處理使用submitHandler參數(shù)$(document).ready(function()$(#signupForm)

10、.validate(SubmitHandler:function()alert(success);)JQuery筆記（表單驗(yàn)證）收藏驗(yàn)證:!-label.validbackground:url(http:height:16px;width:16px;display:block;position:absolute;top:4px;left:152px;-scriptsrc=scripttype=text/javascriptsrc=http:scripttype=text/javascriptsrc=jQuery.validator.setDefaults(debug:true,success:

11、valid)；$(document).ready(function()/1$(#myform).validate(rules:fruit:required,errorPlacement:function(error,element)/if(element.is(:radio)error.appendTo(element.parent(););/2$(#myinput).rules(add,required:true,minlength:2,messages:required:Requiredinput,minlengthjQuery.format(Please,atleast0characte

12、rsarenecessary)；/3$(:radio).each(function()$(this).rules(add,必填,required:true,minlength:2,messages:required:Requiredinputminlength:jQuery.format(Please,atleast0charactersarenecessary););PleaseselectafruitselectBananaApplePeachradio3radio3radio2radio2radiolradiol參考:rules()Returns:OptionsReturnthevali

13、dationsrulesforthefirstselectedelement.rules(add,rules)Returns:OptionsJQuery筆記(表單驗(yàn)證)三收藏TestforjQueryvalidate()pluginjQueryValidationPluginDemoLoginFormUsernamePassword回至U主頁(yè)query-plugin-validation|下載|Changelog|Demos|Documentation點(diǎn)擊Login后如下圖:代碼errorcontainer-demo_1.htmlviewplaincopytoclipboardprint?Te

14、stforjQueryvalidate()pluginmce:scriptsrc=http:mce_src=mce:scripttype=text/javascriptsrc=mce_src=http:mce:scripttype=textZjavascriptsrc=http:mce_src=http:/*.cmxformfieldsetp.errorlabelcolor:red;div.containerbackground-color:#eee;border:1pxsolidred;margin:5px;padding:5px;div.containerollilist-style-ty

15、pe:disc;margin-left:20px;div.containerdisplay:none.containerlabel.errordisplay:inline;*/form.cmxformwidth:30em;form.cmxformlabel.errordisplay:block;margin-left:1em;width:auto;jQueryValidationPluginDemoLoginFormUsernamePassword!-Thereareseriouserrorsinyourformsubmission,pleaseseebelowfordetails.Pleas

16、eenteryouremailaddressPleaseenteryourphonenumber(between2and8characters)Pleaseenteryouraddress(atleast3characters)Pleaseselectanimage(png,jpg,jpeg,gif)Pleaseselectadocument(doc,docx,txt,pdf)-!-ValidatingacompleteformEmailFavoriteColorRedBlueYellowPhoneAddressAvatarPleaseagreetoourpolicyCV-!-Thereare

17、seriouserrorsinyourformsubmission,pleaseseedetailsabovetheform!-回至U主頁(yè)query-plugin-validation:|下載|Changelog|Demos|ahref=http:mce_href=JQuery筆記(表單驗(yàn)證)四errorcontainer-demo_2.html收藏TestforjQueryvalidate()pluginjQueryValidationPluginDemoThereareseriouserrorsinyourformsubmission,pleaseseebelowfordetails.Pl

18、easeenteryouremailaddressPleaseenteryourphonenumber(between2and8characters)Pleaseenteryouraddress(atleast3characters)Pleaseselectanimage(png,jpg,jpeg,gif)Pleaseselectadocument(doc,docx,txt,pdf)ValidatingacompleteformEmailFavoriteColorRedBlueYellowPhoneAddressAvatarPleaseagreetoourpolicyCVThereareser

19、iouserrorsinyourformsubmission,pleaseseedetailsabovetheform!回至U主頁(yè)query-plugin-validation:|下載|Changelog|Demos|Documentation代碼errorcontainer-demo_2.htmlviewplaincopytoclipboardprint?XHTML1.0Transitional/ENTestforjQueryvalidate()plugin!-media=screenhref=css/screen.cssmce_src=lib/jquery.jsmce_src=lib/jquery.metadata.jsmce_src=jquery.validate.jsmce:scriptsrc=http:mce_src=mce:scripttype=text/javascriptsrc=http:mce_src=http:-/*.cmxformfieldsetp.errorlabelcolor:red;*/div.containerbackground-color:#eee;border:1pxsolidred;margin:5px;