jQuery插件的验证插件

前面的话

javascript最常用的场合是表单验证，而jQuery作为一个优秀的javascript库，也提供了一个优秀的表单验证插件——Validation。验证是最古老的jQuery插件之一，已经被世界各地的不同项目所验证，并得到了许多Web开发人员的好评。本文将详细介绍验证插件

摘要

jQuery Validate插件为表单提供了强大的验证功能，使得客户端的表单验证变得更加容易，并提供了大量的定制选项来满足应用程序的各种需求。该插件捆绑了一组有用的身份验证方法，包括URL和电子邮件身份验证，并为编写用户定义的方法提供了一个API。默认情况下，所有绑定方法都使用英语作为错误消息，并已被翻译成37种其他语言

作为标准的验证方法库，验证具有以下特征：

1.内置验证规则：内置验证规则有19种，如必填项、号码、电子邮件、网址、信用卡号等

2.用户定义的验证规则：您可以轻松地自定义验证规则

3.简单强大的验证信息提示：提供默认的验证信息提示，并提供自定义默认提示信息的功能

4.实时验证：验证可以由按键或模糊事件触发

验证作为jquery的一个插件，在使用时需要和jQuery一起引入。先注意介绍jQuery

script src=' http :http://files . cn blogs.com/files/xiaohochi/jquery-1 . 10 . 0 . js '/script script src=' http 3360http://files . cn blogs.com/files/xiaohochi/jquery . validate-1。

验证功能强大，有许多API。想要快速上手，只需要掌握常用功能即可

form id=' demo form ' p Label for=' username ' username:/labe input type=' text ' id=' username ' name=' username '/p Label for=' password ' password:/Label input type=' password ' name=' password '/p input type=' submit ' value=' log in '/p/form script $(' # demo form ')。validate({ rule s : { username : { required d : true，minlength: 2，maxlength: 10 }，password : { required d : true，minlength :10 2，maxlength :10 } })/script以上代码主要验证名称为“username”和“password”的两个输入控件。这两个控件必须填写内容，字符长度必须在2到10之间。

验证规则

在快速入门的示例中，使用了三个检查规则：必选、minlength和maxlength。事实上，有多达17个验证规则

序列号规则描述要求：正确必需字段remote:'check.php '使用ajax方法调用check.php来验证输入值email :正确格式化的电子邮件date:正确格式化的网址日期：必须输入true必须以正确的格式输入日期，并在内部调用Date.parse()方法进行验证。True必须以正确的格式(ISO)输入日期，例如2009-06-23，1998-01-22数字3360 True必须输入合法的数字(负数， 十进制)数字：必须输入整数信用卡：必须输入等于：的合法信用卡号' #field '输入值必须与#field accept:相同输入带合法后缀名称的字符串(上传文件的后缀)Maxlength:5输入最大长度为5的字符串(汉字计为一个字符)minlength:10输入最小长度为10的字符串(汉字计为一个字符)范围长度3333330 range:[5，10]输入值必须介于5和10之间。max:5输入值不能大于5分钟336010。输入值不能小于10。这里有一个更详细的例子来应用上面的17条规则。

"用户名"的表单id="DeMoform"p标签用户名：/标签输入类型=' text ' id=' username ' name=' username '/p p标签为=' password '密码：/标签输入类型=' password ' id=' password ' name=' password '/p p标签为=' confirm-password '确认密码/标签输入类型=' password ' id=' confirm-password ' name=' confirm-password '/p p标签为='电子邮件'电子邮件：/label输入id=' email '名称=' email '/p p标签为=' URL '网址：/标签输入id=' URL '名称=URL '/p/p标签为='日期'生日：/标签输入id=' date ' name=' date '/p p标签为='num '随机数(0-9):/label输入id=' num ' name=' num '/p p标签为=' card '信用卡号：/标签输入id=' card ' name=' card '/p/p输入类型='submit '值='登录//p/form脚本$('#demoForm '). 验证({规则s : {用户名： {必需d : true，maxlength: 10 }，密码： {必需d : true，范围：[5，10] }，'确认-密码' : {等于： ' # password ' }，email: { email:true }，url: { url:true }，默认提示

由上面的例子中看出，验证的默认提示是英文的

消息{ required: '此字段为必填字段，remote: '请修复此字段，电子邮件："请输入有效的电子邮件地址“，url:”请输入有效的url，”,日期："请输入有效的日期。",日期ISO: "请输入有效的日期（国际标准化组织)。",数字："请输入一个有效的数字。",数字： '请只输入数字，信用卡："请输入有效的信用卡号。",等于："请再次输入相同的值”，maxlength : $。验证器。格式('请输入不超过{0}个字符)，最小长度：美元。验证器。格式('请至少输入{0}个字符)，范围长度： $。验证器。格式('请输入长度介于{0}和{1}个字符之间的值。'),范围： $.validator.format('请输入一个介于{0}和{1}之间的值.)，max: $.validator.format('请输入一个小于或等于{0}的值)，min: $.validator.format('请输入大于或等于{0}的值。)}不过可以将其修改为中文，只要加入以下代码

$.extend($.validator.messages，{ required: '这是必填字段，remote: '请修正此字段，email: '请输入有效的电子邮件地址，url: '请输入有效的网址，日期： '请输入有效的日期，日期： '请输入有效的日期（年-月-日)',数字： '请输入有效的数字，digits: '只能输入数字，信用卡： '请输入有效的信用卡号码，等于： '你的输入不相同，分机： '请输入有效的后缀，maxlength : $。验证器。格式('最多可以输入{0} 个字符)，最小长度：美元。验证器。格式('最少要输入{0} 个字符)，范围长度： $。验证器。格式('请输入长度在{0} 到{1} 之间的字符串),范围： $.validator.format('请输入范围在{0} 到{1} 之间的数值)，max: $.validator.format('请输入不大于{0} 的数值)，min: $.validator.format('请输入不小于{0} 的数值')});使用方式

上面的例子中，验证控件的使用，都是通过使用验证()方法完成的，由于这种方法将超文本标记语言结构和爪哇岛描述语言逻辑分离，使得代码更加优化

实际上，还有另一种方法就是通过添加超文本标记语言属性的方式或添加班级类名的方式来进行验证，类似于HTML5新增的投入类控件的功能

由于已经将验证规则添加到超文本标记语言元素中，所以调用验证()方法时，参数为空

form id=' demo form ' P label for=' username ' username:/labe input type=' text ' id=' username ' name=' username ' class=' required ' min length=' 2 '/P/P label for=' email ' email:/labe input id=' email ' name=' email ' email:/label id=' email ' name=' email ' class=' URL '/P input type=' submit ' value=' log in '/P/form script验证({ })/脚本更改提示

无论是validate插件的英文提示还是其扩展的中文提示，都可能无法满足实际项目的需求。此时，我们需要更改错误提示

更改错误提示的方法也很简单，只需在validate()函数中使用messages()方法即可。如果控件不使用messages()方法，则使用默认的错误消息。如下

在messages()方法中，{0}表示rules()方法的当前规则的属性值

form id=' demo form ' p label for=' username ' username:/labe input type=' text ' id=' username ' name=' username '/p/p label for=' email ' email:/label input id=' URL ' URL:/labe input id=' URL ' name=' URL '/p p p p input type=' submit ' value=' log in '/p/form script $(' # demo form ')。验证({ rule s : { username : { required d : true，minlength: 2，maxlength: 10 }、email: { required: true，Email: true }、URL : { required d : '请输入用户名'、min length 3: true }、消息3: { username : { required d 3: '请输入用户名')

实际上，validate插件通过添加一个标签控件来输出错误信息，该标签控件的id名为“input control的id name -error”，其类名为“error”，位于input control的右侧

下表列出了有关错误消息相关属性的方法

参数类型默认值描述errorClass String 'error '指定错误提示的css类名，errorElement String 'label '使用什么标签标记错误，errorContainer Selector不显示或隐藏验证信息，可以在出现错误信息时自动更改容器属性显示，没有错误时隐藏，用处不大。例如，error container : ' # messagebox 1，# messagebox 2 ' error label container选择器不会将错误信息放入容器中。包装字符串不使用任何标签，然后包装上面的errorELement成功样式]

validate插件有一个success()方法，用于设置通过验证后要验证的元素的操作。如果它跟在一个字符串后面，它将被视为一个css类或函数。

成功：字符串，回调

success:函数(标签){ label.html(' ')。addClass(“成功”)；} success :“success”，但实际上，validate插件只是在标签中添加了一个“success”类，并没有删除原来的“error”类。实际测试后，不能删除“错误”类名。删除后，验证插件将在每次验证成功时自动生成另一个标签标签。

因此，成功的效果不能正常使用，这应该是验证插件的一个bug

样式标签。错误{后台： no-repeat 0 4px；背景图像： URL('未选中。gif ')；边距-左侧：6 px左填充left :14 pxcolor : red }/style body form id=' DeMoform ' p标签为='用户名'用户名：/标签输入类型=' text ' id=' username ' name=' username '/p p标签为=' email '电子邮件：/label输入id=' email '名称=' email '/p p标签为=' URL '网址：/标签输入id=' URL '名称=' URL '/p/p输入类型='submit '值='登录//p/form脚本$('#demoForm ').验证({规则s : {用户名： {必需d: true，minlength: 2，maxlength: 10 }、email: {必需d: true，email:true }、url: {必需d : true，url:true })，消息： {用户名3: {必填项d 3: '请输入用户名，minlength: '至少输入{0}个字符，maxlength: '最多输入{0}个字符}，email:{ required: '请输入邮箱，email: '邮箱格式不正确}，url:{ required: '请输入网址，url: '网址格式不正确（完整的网址应包括http://或https://)' } } })/脚本自定义验证

由于需求的需要，除提供的默认验证规则外，还需要自定义验证规则，满足业务需要。这时就需要使用addMethod()方法

【添加方法(】

添加方法（名称、方法、消息)方法用来添加一个新的验证方法

参数名字是添加的方法的名字。参数方法是一个函数，接收三个参数（值，元素，参数).价值是元素的值，元素是元素本身，参数是参数

以验证手机号为例，手机号一般是11位，前3位是号段，后8位一般没有限制。而且，在手机开头很可能有0或86

//开头(0|\ 86)?//前3位13 \ d | 14[579]| 15[0-35-9]| 17[0135-8]| 18 \ d/后8位\d{8}//手机号码var phone=/^(0|\ 86)？(13 \ d | 14[579]| 15[0-35-9]| 17[0135-8]| 18 \ d)\ d { 8 } $/；$.validator.addMethod({ 'phone '，function(value，element，param){ var reg=/^(0|\ 86)？(13 \ d | 14[579]| 15[0-35-9]| 17[0135-8]| 18 \ d)\ d { 8 } $/；返回值。测试；}, '请输入正确的手机号码})样式标签。错误{左边距：6 px左填充left :14 xcolor : red背景技术：不重复04px背景-图像： URL('数据：图像/gif；base64，r0lgodlhdgaoamqaaopsapwpgpvf 0 o 5 zmpgiupe n///tdepjjsp 718 poeco 1 ipruwpzq4pa 0 kpktypsof///waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavcycqm 0 AAAA a5sibhchaulazej 528 agisgadduseyaidobsaomxbaxxpokpb0 etfxskpjey 6 fd4ghrjba f1 ZC)标签为='电话'手机号码：/标签输入类型=' text ' id=' phone ' name=' phone '/p/p输入类型='按钮'值='提交/p/表单脚本$。验证器。addmethod(' phone '，function(value，element，param){ var reg=/^(0|\ 86)？(13 \ d | 14[579]| 15[0-35-9]| 17[0135-8]| 18 \ d)\ d { 8 } $/；返回reg.test(值);}, '请输入正确的手机号码');$('#demoForm ').验证({规则： {电话： {要求d :为真，电话：为真} }，消息： {电话： {必填项d : }请输入手机号码} } })/脚本修改触发方式

下面的虽然是布尔型的，但建议除非要改为假的，否则别乱添加

触发方式类型描述默认值onsubmit布尔值提交时验证。设置为错误的就用其他方法去验证trueonfocusout布尔值失去焦点时验证（不包括复选框/单选按钮)trueonkeyup布尔值在按键时验证trueonclick布尔值在点击复选框和单选按钮时验证truefocusInvalid布尔值提交表单后，未通过验证的表单会获得焦点truefocusCleanup布尔值如果是没错，当未通过验证的元素获得焦点时，移除错误提示错误的远程校验

使用创建交互式、快速动态网页应用的网页开发技术方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用数据选项

[注意]远程地址只能输出真的或'假，不能有其他输出

远程： { URL : '检查-电子邮件。PHP '，//后台处理程序键入：“post”，//数据发送方式dataType: 'json '，//接受数据格式data: { //要传递的数据用户名：函数(){ return $(“# username”).val()；} } }样式标签。错误{左边距：6 px左填充left :14 xcolor : red背景技术：不重复04px背景-图像： URL('数据：图像/gif；base64，r0lgodlhdgaoamqaaopsapwpgpvf 0 o 5 zmpgiupe n///tdepjjsp 718 poeco 1 ipruwpzq4pa 0 kpktypsof///waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavcycqm 0 AAAA a5sibhchaulazej 528 agisgadduseyaidobsaomxbaxxpokpb0 etfxskpjey 6 fd4ghrjba f1 ZC)标签为='num '请选择数字/label select name=' num ' id=' num '选项值=' 1 ' 1/选项值=' 2 ' 2/选项选项值=' 3 ' 3/选项/select/p p输入类型='按钮'值='提交/p/表单脚本$('#demoForm ').验证({ rule s : { num : { remote : } '验证测试。PHP ' } })，消息： { num : { remote : '选择的数字不正确' } }});/脚本？PHP函数test _ input($ data){ $ data=trim($ data)；$ data=长条斜线($ data)；$ data=html special chars($ data)；返回$数据；} $ data=test _ input($ _ REQUEST[' num '])；if($ data==' 2 '){ echo ' true '；} else { echo ' false}？最后

确认插件的功能不只于此，但本文基本上把常用的功能进行了详细的介绍。如果要了解确认更高级的功能，请移步官方网站

最后介绍一个比较有趣的知识——验证、确认和验证器，它们的中文意思是验证验证。插件的射流研究…文件名是validate.js，验证插件中最常用的方法就是验证()方法，基本上所有的验证操作都通过该方法进行。如果要进行自定义验证的话，则需要用到验证器对象下的静态方法addMethod()

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！