jquery表单验证大全

1、JQuery 笔记（表单验证大全）jquery.validate.js 是 jquery 旗下的一个验证插件，借助 jquery 的优势，我们可以迅速验证一些常见的输入，并且可以自己扩充自己的验证方法。举个例子，有这么一个表单：viewplaincopytoclipboardprint?ValidatingacompleteformFirstnameLastnameUsernamePasswordConfirmpasswordEmailValidatingacompleteformFirstnameLastnameUsernamePasswordConfirmpasswordEmail在这个表

2、单中，有名、姓、用户名、密码、确认密码和 email。他们都为非空，并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用 jQuery 验证最简单的方式是引入 jquery.js和 jqueryvalidation.js 两个 js 文件。然后分别在 input 中加入 class 即：viewplaincopytoclipboardprint?以下列出 validate 自带的默认验证required:必选字段,remote:请修正该字段,email:请输入正确格式的电子邮件,url:请输入合法的网址,date:请输入合法的日期,dateISO:请输入合法的日期（ISO）.,numbe

3、r:请输入合法的数字,digits:只能输入整数,creditcard:请输入合法的信用卡号,equalTo:请再次输入相同的值,accept:请输入拥有合法后缀名的字符串,maxlength:jQuery.format（请输入一个长度最多是0的字符串），minlength:jQuery.format（请输入一个长度最少是0的字符串），rangelength:jQuery.format（请输入一个长度介于0和1之间的字符串工range:jQuery.format（请输入一个介于0和1之间的值），max:jQuery.format（请输入一个最大为0的值）,min:jQuery.format（请

4、输入一个最小为0的值）然后，在 document 的 read 事件中，加入如下方法：$(document).ready(function()$(#signupForm).validate();)这样，当 form 被提交的时候，就会根据 input 指定的 class 来进行验证了。form 的提交就会被阻止。并且，将提示信息显示在 input 的后面。不过，这样感觉不好，因为验证规则侵入了我们的 html 代码。还有一个方式,“rules。我们将 input 的那些验证用 class 删除掉。然后修改 document 件响应代码：$(document).ready(function()$

5、(#signupForm).validate(rules:firstname:required,lastname:required,username:required,password:required,confirm_password:required:true,equalTo:#password),email:required:true,email:true);)这样以来，也能达到相同的效果。那么，接下的问题，就是显示的错误提示是默认的。我们需要使用自定义的提示:$(document).ready(function()$(#signupForm).validate(rules:firstn

6、ame:required,lastname:required,username:required,password:required,confirm_password:required:true,equalTo:#password如果失败，便是使用的 ready 事,email:required:true,email:true,messages:firstname:必填项,lastname:必填项username:必填项 password:必填项,confirm_password:required:必填项,equalTo:密码不一致),email:required:必填项,email:格式有误

7、);)如果你还想在错误信息上显示特别的样式(比如字体为红色)即可通过添加:#signupFormlabel.errorpadding-left:16px;margin-left:2px;color:red;background:url(img/unchecked.gif)no-repeat0px0px;继续添加对输入密码长度的验证规则:$(document).ready(function()$(#signupForm).validate(rules:firstname:required,lastname:required,username:required,password:required:

8、true,minlength:4,maxlength:15,confirm_password:required:true,equalTo:#password,email:required:true,email:true,messages:firstname:必填项,lastname:必填项,username:必填项,password:required:必填项,minlength:jQuery.format（密码长度不少于0位）,maxlength:jQuery.format（密码长度不超过0位）,confirm_password:required:必填项,equalTo:密码不一致,email

9、:required:必填项,email:格式有误）;）使用 remote可以通过 event 指定触发效验方式（可选值有 keyup（每次按键时），blur（去焦点时），不指定时就只在按提交按钮时触发）当控件失$(document).ready(function()$(#signupForm).validate(event:keyup|blur)如果通过指定 debug 为 true 则表单不会提交只能用来验证(默认为提交)，可用来调试$(document).ready(function()$(#signupForm).validate(debug:true)如果在提交前还需要进行一些自定义处

10、理使用 submitHandler 参数$(document).ready(function()$(#signupForm).validate(SubmitHandler:function()alert(success);)JQuery 笔记（表单验证）收藏验证:!-label.validbackground:url(http: 笔记(表单验证)三收藏TestforjQueryvalidateQpluginjQueryValidationPluginDemoLoginFormUsernamePassword|下载|Changelog|Demos|Documentation点击Login后如下图

11、:代码 errorcontainer-demo_1.htmlviewplaincopytoclipboardprint?TestforjQueryvalidate()plugin/*.cmxformfieldsetp.errorlabelcolor:red;div.containerbackground-color:#eee;border:1pxsolidred;margin:5px;padding:5px;div.containerollilist-style-type:disc;margin-left:20px;div.containerdisplay:none.containerlabe

12、l.errordisplay:inline;*/form.cmxformwidth:30em;form.cmxformlabel.errordisplay:block;margin-left:1em;width:auto;jQueryValidationPluginDemoLoginFormUsernamePassword!-Thereareseriouserrorsinyourformsubmission,pleaseseebelowfordetails.PleaseenteryouremailaddressPleaseenteryourphonenumber(between2and8cha

13、racters)Pleaseenteryouraddress(atleast3characters)Pleaseselectanimage(png,jpg,jpeg,gif)Pleaseselectadocument(doc,docx,txt,pdf)-!-ValidatingacompleteformEmailFavoriteColorRedBlueYellowPhoneAddressAvatarPleaseagreetoourpolicyCVclass=validate:required:true,accept:docx?|txt|pdf/-!-Thereareseriouserrorsi

14、nyourformsubmission,pleaseseedetailsabovetheform!-ahref=http:bassistance.de/jquery-plugins/jquery-plugin-validation/回至 U主页 query-plugin-validation:|下载|Changelog|Demos|DocumentationJQuery笔记(表单验证)四errorcontainer-demo_2.html收藏TestforjQueryvalidate()pluginjQueryValidationPluginDemoThereareseriouserrorsi

15、nyourformsubmission,pleaseseebelowfordetails.PleaseenteryouremailaddressPleaseenteryourphonenumber(between2and8characters)Pleaseenteryouraddress(atleast3characters)Pleaseselectanimage(png,jpg,jpeg,gif)Pleaseselectadocument(doc,docx,txt,pdf)ValidatingacompleteformEmailFavoriteColorRedBlueYellowPhoneA

16、ddressAvatarPleaseagreetoourpolicyCVThereareseriouserrorsinyourformsubmission,pleaseseedetailsabovetheform!回至 U 主页query-plugin-validation:|下载|Changelog|Demos|Documentation代码 errorcontainer-demo_2.htmlviewplaincopytoclipboardprint?!-XHTML1.0Transitional/ENTestforjQueryvalidate()pluginmedia=screenhref

17、=css/screen.cssmce_src=lib/jquery.jsmce_src=lib/jquery.metadata.jsmce_src=jquery.validate.js-/*.cmxformfieldsetp.errorlabelcolor:red;*/div.containerbackground-color:#eee;border:1pxsolidred;margin:5px;padding:5px;div.containerollilist-style-type:disc;margin-left:20px;)div.containerdisplay:none/*.cont

18、ainerlabel.errordisplay:inline;*/*form.cmxformwidth:30em;form.cmxformlabel.errordisplay:block;margin-left:1em;width:auto;*/jQueryValidationPluginDemo!-LoginFormUsernamePassword-Thereareseriouserrorsinyourformsubmission,pleaseseebelowfordetails.PleaseenteryouremailaddressPleaseenteryourphonenumber(be

19、tween2and8characters)Pleaseenteryouraddress(atleast3characters)Pleaseselectanimage(png,jpg,jpeg,gif)Pleaseselectadocument(doc,docx,txt,pdf)ValidatingacompleteformEmailFavoriteColorRedBlueYellowPhoneAddressAvatarPleaseagreetoourpolicyCVclass=validate:required:true,accept:docx?|txt|pdf/inputtype=filei

20、d=cvname=cvThereareseriouserrorsinyourformsubmission,pleaseseedetailsabovetheform!回至 U主页 query-plugin-validation:|下载|Changelog|Demos|DocumentationTestforjQueryvalidate()plugin!-/*.cmxformfieldsetp.errorlabelcolor:red;*/div.containerbackground-color:#eee;border:1pxsolidred;margin:5px;padding:5px;div.

21、containerollilist-style-type:disc;margin-left:20px;div.containerdisplay:none/*.containerlabel.errordisplay:inline;*/*form.cmxformwidth:30em;form.cmxformlabel.errordisplay:block;margin-left:1em;width:auto;*/jQueryValidationPluginDemo!-LoginFormUsernamePassword-Thereareseriouserrorsinyourformsubmissio

22、n,pleaseseebelowfordetails.addressPleaseenteryourphonenumber(between2and8characters)Pleaseenteryouraddress(atleast3characters)Pleaseselectanimage(png,jpg,jpeg,gif)Pleaseselectadocument(doc,docx,txt,pdf)ValidatingacompleteformEmailPleaseenteryouremailFavoriteColorRedBlueYellowPhoneAddressAvatarPlease

23、agreetoourpolicyCVThereareseriouserrorsinyourformsubmission,pleaseseedetailsabovetheform!回至 U主页 query-plugin-validation:|下载|Changelog|Demos|DocumentationJQuery 笔 t 己(表单验证)五 errorcontainer-demo_3.htmlmeta:string 收藏jquery.validate.js 简介(续 1)meta:stringDemo代码 errorcontainer-demo_3.htmlviewplaincopytoclipboardprint?jquery.validate.js 简介(续 1)meta:stringDemojquery.validate.js 简介(续 1)meta:stringDemoJQu