2023年6月21日发(作者：)

jQuery验证插件validate使⽤⽅法详解1. 写在前⾯　　我们知道，⽤户在注册的时候，会有个表单页⾯，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在⽤户提交之前进⾏验证才⾏，如果不符合要求，需要在右边显⽰⼀个友好的提⽰，让⽤户修改。

　　记得以前在学习Servlet的时候，实现⼀个简单的⽤户注册功能的验证是在后台做的，有些⽤了正则表达式，有些没⽤，但是都⽐较简单。流程是这样的，前台提交表单数据后，servlet获取数据先进⾏验证，如果不符合要求，将提⽰信息放到⼀个List中，然后再把List存到session中，跳转到⼀个新的页⾯做回显，把错误信息也显⽰出来，但是⽐较繁琐。

　　前⾯做⽹上商城项⽬的时候，⽤EasyUI做后台商品添加时，也做了验证的功能，EasyUI⾃带了验证的功能，还是很强⼤的，效果也不错。感兴趣的话不妨来看⼀下。

　　但是前台⽤户注册的页⾯我们该如何做呢？这就是本⽂所要介绍的主要内容了，我们可以使⽤jQuery的Validate插件来做注册的验证功能，jQuery我也没有系统的学习，只是⽤到什么学什么，⽤到什么了解什么，所以如有错误之处，欢迎留⾔指正~下⾯我⼀步步通过代码详细介绍⼀下jQuery-Validate验证插件的使⽤步骤。

2. 效果展⽰　　⾸先来看⼀下最后实现的效果，先有个直观的感受，个⼈感觉还算可以的~能接受。　　从图中可以看出，包括输⼊前的提⽰，输⼊正确和错误的提⽰的功能，都已经完成。再看⼀下我的⼯程：　　总共有6个jsp⽂件，之所以写成6个是为了⼀步步解说做这个效果的步骤，最后是最终版的。运⾏的时候也只需要运⾏这个即可。 下⾯我详细分析⼀下使⽤jQurey-Validate验证插件的过程。

3. Validate环境的搭建　 　环境搭建，肯定少不了jar包，我使⽤的是jQuery-validate-1.15，官⽅上给出了依赖的⼏个版本的jQuery，我下了jQuery-1.11.1。所以将这两个js⽂件放到⼯程中WebRoot/js中，并在jsp页⾯中导⼊即可。　　 很简单，为了搭建环境⽽已，如果点击提交，不会跳转到指定页⾯表⽰环境搭建成功。4. Validate基本⽅法的使⽤　 好了，环境搭建成功了，接下来我们开始使⽤Validate的基本⽅法了，这⾥还要导⼊⼀个js⽂件：，新版本的jQuery-validate-1.15中没有对⽂件后缀的验证，后来我在官⽹上查了⼀下，官⽹上说放到中了，所以我去下了个，放到⼯程中了，⽽且⽅法名也和⽼版本不太⼀样，下⾯再说。看⼀下：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证

姓名：
密码：
确认密码：
爱好： 上⽹： 唱歌： 编程： 书法：
邮箱：
头像：
　　demo2中，我们写了⼀些基本的表单了，并且在js中对其进⾏了验证，validate中定义了⼀些缺省的验证，required表⽰必填字段，rangelength表⽰长度范围，⽤数组表⽰范围边界，equalTo后⾯跟⼀个id，表⽰跟后⾯跟的id的元素内容相同，这⾥说⼀下extension，表⽰后缀，以前版本叫accept，新版本中改为extension了，⽹上的搜索的关于后缀的验证都是accept，新版没了，⽽且extension就是在新加的中。我们看⼀下这个版本的效果：

　　有点丑……因为还没做css， 但是我直接点击提交，会出现⼀些验证信息了，这些都是默认的信息，是源码中提供的，说明⼀点，验证功能⽣效了，我们下⾯就改写⼀下后⾯显⽰的信息，这些默认的显然不太友好。5. 实现错误消息的本地化　 　我们可以指定messages消息的显⽰内容，也是json格式的，如下：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证 相当于覆写了原来默认的消息提⽰，来看下效果：这就有点感觉了。继续往下完善。6. 实现远程验证所谓远程验证，指的是当⽤户注册时输⼊⽤户名时，系统得从数据库中查询是否已经有该⽤户名了，如果有则告诉⽤户已经有⼈注册过了该名字了，但是我们不⽤去查数据库，我们写个Action模拟下即可，主要是实现validate插件和Action之间的通信。看：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证 我们看到，在sname⾥⾯新加了个remote⽅法，这个是⽤来远程验证的，参数url是要发送的请求Action，所以我们后台写个AjaxAction，在AjaxAction中写过check⽅法来，判断⽤户名是否为admin，如果是，则以流的形式返回false，前台接收到false就会验证失败，返回true则验证成功。失败了则告诉⽤户该⽤户名已存在，后台Action这⾥就不写了，见我上传的源码即可。我们来看下效果：7. ⾃定义验证⽅法我们也可以⾃定义验证的⽅法，⽐如⼿机号，我们可以⾃⼰定义验证⽅法，⾃⼰定义的⽅法最好写在扩展js中，我们⾃⼰写⼀个放到js⽂件夹中，在该⽂件中写上：//⾃定义⽅法，完成⼿机号码的验证//name:⾃定义⽅法的名称，method：函数体, message:错误消息$.hod("phone", function(value, element, param){ //⽅法中⼜有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/^1[3458]d{9}$/).test(value);}, "⼿机号码不正确");addMethod表⽰新加的⽅法，第⼀个参数是⽅法名，第⼆个参数是函数体，第三个参数表⽰验证错误消息。其中函数体中，⼜有三个参数，value表⽰验证的值，element表⽰当前dom对象，param表⽰参数。我们使⽤正则表达式验证了⼿机号。这⾥就不测试了。最后我们来看⼀下终极的表单验证，终极验证表单需要加上CSS了，下⾯是完整的终极验证代码。8. 验证表单完整版8.1 Html表单为了让表单结构简单⽽清晰，我们将表单的每个元素都包裹在⼀个div结构中：⽤label标签⽤来标记元素的名称，接着便是表单元素本⾝。【注明：1.使⽤label标签的好处是为⿏标⽤户改进了可⽤性。当在label元素内点击⽂本时，浏览器就会⾃动将焦点转到和label相关的表单控件上。2.每个需要校验的表单元素都应该设置id和name属性，⽅便在使⽤插件时将元素绑定校验规则和校验信息。】

表单实现代码如下：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证

jQuery-Validate表单校验验证

placeholder="设置密码" tip="长度为6-16个字符">

上⽹： 唱歌： 编程： 书法：

autocomplete="off" tip="请输⼊邮箱">

8.2 表单验证js逻辑接着我们通过js来实现对表单元素的校验。在校验之前，我对jquery validate插件进⾏了功能扩展，对默认的选项进⾏了重写覆盖。jquery validate插件默认只提供了校验正确及错误时的提⽰，缺少我们常见的帮助信息提⽰。为了解决这个问题，我研究了插件的源码，发现插件本⾝提供了onfocusin（校验元素获得焦点时调⽤）和onfocusout（校验元素失去焦点时调⽤）这两个函数。通过修改默认参数的这两个接⼝，可以实现党⽤户⿏标点击或选择元素时（即元素获得焦点），提⽰帮助信息；在⽤户⿏标离开元素时（即元素失去焦点），移除帮助信息。

　　此外，jquery validate默认提供表单元素输⼊时的实时校验，因为我们要求在输⼊时只提⽰⽤户帮助信息，故需要关闭输⼊的实时校验，为此我们将默认参数中的onkeyup设置为null。

　　具体的扩展改进代码我放到了新增js脚本中，代码如下：/*************************插件新功能-设置插件validator的默认参数*****************************************/$.aults({ /*关闭键盘输⼊时的实时校验*/ onkeyup: null, /*添加校验成功后的执⾏函数--修改提⽰内容，并为正确提⽰信息添加新的样式(默认是valid)*/ success: function(label){ /*label的默认正确样式为valid，需要通过validClass来重置，否则这⾥添加的其他样式不能被清除*/ ('').addClass('valid'); }, /*重写校验元素获得焦点后的执⾏函数--增加[1.光标移⼊元素时的帮助提⽰,2.校验元素的⾼亮显⽰]两个功能点*/ onfocusin: function( element ) { tive = element; /*1.帮助提⽰功能*/ pper(For(element)).hide(); var tip = $(element).attr('tip'); //alert(tip); if(tip && $(element).parent().children(".tip").length === 0){ $(element).parent().append(""); } /*2.校验元素的⾼亮显⽰*/ $(element).addClass('highlight'); // Hide error label and remove error class on focus if enabled if ( leanup ) { if ( light ) { ( this, element, lass, lass ); } ese( For( element ) ); } }, /*重写校验元素焦点离开时的执⾏函数--移除[1.添加的帮助提⽰,2.校验元素的⾼亮显⽰]*/ onfocusout: function( element ) { /*1.帮助提⽰信息移除*/ $(element).parent().children(".tip").remove(); /*2.校验元素⾼亮样式移除*/ $(element).removeClass('highlight'); /*3.替换下⾯注释的原始代码，任何时候光标离开元素都触发校验功能*/ //t( element ); if ( !ble( element ) && ( in ted || !al( element ) ) ) { t( element ); } }});//⾃定义⽅法，完成⼿机号码的验证//name:⾃定义⽅法的名称，method：函数体, message:错误消息$.hod("phone", function(value, element, param){ //⽅法中⼜有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/^1[3458]d{9}$/).test(value);}, "⼿机号码不正确");8.3 表单验证css样式最后还要为页⾯元素添加css样式。插件中有⼀系列默认选项：其中默认错误显⽰标签为label，错误样式为。上⾯在⽂件中，有⼀个success函数需要说明⼀下。这个函数是在校验成功的时候执⾏的，我们在函数中为label提⽰标签添加了校验正确对应的样式。因此在css中如果要美化信息提⽰，需要对label相关样式如error,valid样式进⾏设计。此外我们在扩展插件功能中添加了⼀个class为tip的label标签，该标签仅在校验元素获得焦点时⽣成。为此，还需要设置label的tip样式。

　　完整的样式⽂件内容具体如下：body{ font-family: Microsoft Yahei; font-size: 15px;}fieldset{ width: 650px; }legend{

text-align: center; font-size: 20px;}.item{ height: 56px; line-height: 30px; margin: 10px;}.item .item-label{ float: left; width: 80px; text-align: right;}.item-text{ float: left; width: 240px; height: 30px; padding: 9px 25px 9px 5px; margin-left: 10px; border: 1px solid #ccc; overflow: hidden;}.item-select{ float: left; height: 30px; border: 1px solid #ccc; margin-left: 10px; font-size: 14px; padding: 6px 0px;}.item-file{ float: left; height: 30px; margin-left: 10px; font-size: 14px; padding: 6px 0px;}.item-submit{ float: left; height: 30px; width: 50px; margin-left: 90px; font-size: 14px;}{ border: 1px solid #E6594E;}ght{ border: 1px solid #7abd54;}{ float: left; height: 30px; line-height: 30px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 35px; color: red; background: url('../image/') no-repeat left center;}{ float: left; height: 30px; line-height: 30px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 35px; color: #aaa; background: url('../image/') no-repeat left center; padding-left: 35px;}{ background: url('../image/') no-repeat left center;}⾄此，表单验证就做好了，这⾥就不再展⽰了，看最前⾯即可。效果还可以，不过还可以更加完善，我对jQuery了解的也不太多，希望⼤家共同进步！源码下载：以上就是本⽂的全部内容，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

2023年6月21日发(作者：)

jQuery验证插件validate使⽤⽅法详解1. 写在前⾯　　我们知道，⽤户在注册的时候，会有个表单页⾯，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在⽤户提交之前进⾏验证才⾏，如果不符合要求，需要在右边显⽰⼀个友好的提⽰，让⽤户修改。

　　记得以前在学习Servlet的时候，实现⼀个简单的⽤户注册功能的验证是在后台做的，有些⽤了正则表达式，有些没⽤，但是都⽐较简单。流程是这样的，前台提交表单数据后，servlet获取数据先进⾏验证，如果不符合要求，将提⽰信息放到⼀个List中，然后再把List存到session中，跳转到⼀个新的页⾯做回显，把错误信息也显⽰出来，但是⽐较繁琐。

　　前⾯做⽹上商城项⽬的时候，⽤EasyUI做后台商品添加时，也做了验证的功能，EasyUI⾃带了验证的功能，还是很强⼤的，效果也不错。感兴趣的话不妨来看⼀下。

　　但是前台⽤户注册的页⾯我们该如何做呢？这就是本⽂所要介绍的主要内容了，我们可以使⽤jQuery的Validate插件来做注册的验证功能，jQuery我也没有系统的学习，只是⽤到什么学什么，⽤到什么了解什么，所以如有错误之处，欢迎留⾔指正~下⾯我⼀步步通过代码详细介绍⼀下jQuery-Validate验证插件的使⽤步骤。

2. 效果展⽰　　⾸先来看⼀下最后实现的效果，先有个直观的感受，个⼈感觉还算可以的~能接受。　　从图中可以看出，包括输⼊前的提⽰，输⼊正确和错误的提⽰的功能，都已经完成。再看⼀下我的⼯程：　　总共有6个jsp⽂件，之所以写成6个是为了⼀步步解说做这个效果的步骤，最后是最终版的。运⾏的时候也只需要运⾏这个即可。 下⾯我详细分析⼀下使⽤jQurey-Validate验证插件的过程。

3. Validate环境的搭建　 　环境搭建，肯定少不了jar包，我使⽤的是jQuery-validate-1.15，官⽅上给出了依赖的⼏个版本的jQuery，我下了jQuery-1.11.1。所以将这两个js⽂件放到⼯程中WebRoot/js中，并在jsp页⾯中导⼊即可。　　 很简单，为了搭建环境⽽已，如果点击提交，不会跳转到指定页⾯表⽰环境搭建成功。4. Validate基本⽅法的使⽤　 好了，环境搭建成功了，接下来我们开始使⽤Validate的基本⽅法了，这⾥还要导⼊⼀个js⽂件：，新版本的jQuery-validate-1.15中没有对⽂件后缀的验证，后来我在官⽹上查了⼀下，官⽹上说放到中了，所以我去下了个，放到⼯程中了，⽽且⽅法名也和⽼版本不太⼀样，下⾯再说。看⼀下：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证

姓名：
密码：
确认密码：
爱好： 上⽹： 唱歌： 编程： 书法：
邮箱：
头像：
　　demo2中，我们写了⼀些基本的表单了，并且在js中对其进⾏了验证，validate中定义了⼀些缺省的验证，required表⽰必填字段，rangelength表⽰长度范围，⽤数组表⽰范围边界，equalTo后⾯跟⼀个id，表⽰跟后⾯跟的id的元素内容相同，这⾥说⼀下extension，表⽰后缀，以前版本叫accept，新版本中改为extension了，⽹上的搜索的关于后缀的验证都是accept，新版没了，⽽且extension就是在新加的中。我们看⼀下这个版本的效果：

　　有点丑……因为还没做css， 但是我直接点击提交，会出现⼀些验证信息了，这些都是默认的信息，是源码中提供的，说明⼀点，验证功能⽣效了，我们下⾯就改写⼀下后⾯显⽰的信息，这些默认的显然不太友好。5. 实现错误消息的本地化　 　我们可以指定messages消息的显⽰内容，也是json格式的，如下：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证 相当于覆写了原来默认的消息提⽰，来看下效果：这就有点感觉了。继续往下完善。6. 实现远程验证所谓远程验证，指的是当⽤户注册时输⼊⽤户名时，系统得从数据库中查询是否已经有该⽤户名了，如果有则告诉⽤户已经有⼈注册过了该名字了，但是我们不⽤去查数据库，我们写个Action模拟下即可，主要是实现validate插件和Action之间的通信。看：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证 我们看到，在sname⾥⾯新加了个remote⽅法，这个是⽤来远程验证的，参数url是要发送的请求Action，所以我们后台写个AjaxAction，在AjaxAction中写过check⽅法来，判断⽤户名是否为admin，如果是，则以流的形式返回false，前台接收到false就会验证失败，返回true则验证成功。失败了则告诉⽤户该⽤户名已存在，后台Action这⾥就不写了，见我上传的源码即可。我们来看下效果：7. ⾃定义验证⽅法我们也可以⾃定义验证的⽅法，⽐如⼿机号，我们可以⾃⼰定义验证⽅法，⾃⼰定义的⽅法最好写在扩展js中，我们⾃⼰写⼀个放到js⽂件夹中，在该⽂件中写上：//⾃定义⽅法，完成⼿机号码的验证//name:⾃定义⽅法的名称，method：函数体, message:错误消息$.hod("phone", function(value, element, param){ //⽅法中⼜有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/^1[3458]d{9}$/).test(value);}, "⼿机号码不正确");addMethod表⽰新加的⽅法，第⼀个参数是⽅法名，第⼆个参数是函数体，第三个参数表⽰验证错误消息。其中函数体中，⼜有三个参数，value表⽰验证的值，element表⽰当前dom对象，param表⽰参数。我们使⽤正则表达式验证了⼿机号。这⾥就不测试了。最后我们来看⼀下终极的表单验证，终极验证表单需要加上CSS了，下⾯是完整的终极验证代码。8. 验证表单完整版8.1 Html表单为了让表单结构简单⽽清晰，我们将表单的每个元素都包裹在⼀个div结构中：⽤label标签⽤来标记元素的名称，接着便是表单元素本⾝。【注明：1.使⽤label标签的好处是为⿏标⽤户改进了可⽤性。当在label元素内点击⽂本时，浏览器就会⾃动将焦点转到和label相关的表单控件上。2.每个需要校验的表单元素都应该设置id和name属性，⽅便在使⽤插件时将元素绑定校验规则和校验信息。】

表单实现代码如下：<%@ page language="java" import=".*" pageEncoding="UTF-8"%> jquery validate验证

jQuery-Validate表单校验验证

placeholder="设置密码" tip="长度为6-16个字符">

上⽹： 唱歌： 编程： 书法：

autocomplete="off" tip="请输⼊邮箱">

8.2 表单验证js逻辑接着我们通过js来实现对表单元素的校验。在校验之前，我对jquery validate插件进⾏了功能扩展，对默认的选项进⾏了重写覆盖。jquery validate插件默认只提供了校验正确及错误时的提⽰，缺少我们常见的帮助信息提⽰。为了解决这个问题，我研究了插件的源码，发现插件本⾝提供了onfocusin（校验元素获得焦点时调⽤）和onfocusout（校验元素失去焦点时调⽤）这两个函数。通过修改默认参数的这两个接⼝，可以实现党⽤户⿏标点击或选择元素时（即元素获得焦点），提⽰帮助信息；在⽤户⿏标离开元素时（即元素失去焦点），移除帮助信息。

　　此外，jquery validate默认提供表单元素输⼊时的实时校验，因为我们要求在输⼊时只提⽰⽤户帮助信息，故需要关闭输⼊的实时校验，为此我们将默认参数中的onkeyup设置为null。

　　具体的扩展改进代码我放到了新增js脚本中，代码如下：/*************************插件新功能-设置插件validator的默认参数*****************************************/$.aults({ /*关闭键盘输⼊时的实时校验*/ onkeyup: null, /*添加校验成功后的执⾏函数--修改提⽰内容，并为正确提⽰信息添加新的样式(默认是valid)*/ success: function(label){ /*label的默认正确样式为valid，需要通过validClass来重置，否则这⾥添加的其他样式不能被清除*/ ('').addClass('valid'); }, /*重写校验元素获得焦点后的执⾏函数--增加[1.光标移⼊元素时的帮助提⽰,2.校验元素的⾼亮显⽰]两个功能点*/ onfocusin: function( element ) { tive = element; /*1.帮助提⽰功能*/ pper(For(element)).hide(); var tip = $(element).attr('tip'); //alert(tip); if(tip && $(element).parent().children(".tip").length === 0){ $(element).parent().append(""); } /*2.校验元素的⾼亮显⽰*/ $(element).addClass('highlight'); // Hide error label and remove error class on focus if enabled if ( leanup ) { if ( light ) { ( this, element, lass, lass ); } ese( For( element ) ); } }, /*重写校验元素焦点离开时的执⾏函数--移除[1.添加的帮助提⽰,2.校验元素的⾼亮显⽰]*/ onfocusout: function( element ) { /*1.帮助提⽰信息移除*/ $(element).parent().children(".tip").remove(); /*2.校验元素⾼亮样式移除*/ $(element).removeClass('highlight'); /*3.替换下⾯注释的原始代码，任何时候光标离开元素都触发校验功能*/ //t( element ); if ( !ble( element ) && ( in ted || !al( element ) ) ) { t( element ); } }});//⾃定义⽅法，完成⼿机号码的验证//name:⾃定义⽅法的名称，method：函数体, message:错误消息$.hod("phone", function(value, element, param){ //⽅法中⼜有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/^1[3458]d{9}$/).test(value);}, "⼿机号码不正确");8.3 表单验证css样式最后还要为页⾯元素添加css样式。插件中有⼀系列默认选项：其中默认错误显⽰标签为label，错误样式为。上⾯在⽂件中，有⼀个success函数需要说明⼀下。这个函数是在校验成功的时候执⾏的，我们在函数中为label提⽰标签添加了校验正确对应的样式。因此在css中如果要美化信息提⽰，需要对label相关样式如error,valid样式进⾏设计。此外我们在扩展插件功能中添加了⼀个class为tip的label标签，该标签仅在校验元素获得焦点时⽣成。为此，还需要设置label的tip样式。

　　完整的样式⽂件内容具体如下：body{ font-family: Microsoft Yahei; font-size: 15px;}fieldset{ width: 650px; }legend{

text-align: center; font-size: 20px;}.item{ height: 56px; line-height: 30px; margin: 10px;}.item .item-label{ float: left; width: 80px; text-align: right;}.item-text{ float: left; width: 240px; height: 30px; padding: 9px 25px 9px 5px; margin-left: 10px; border: 1px solid #ccc; overflow: hidden;}.item-select{ float: left; height: 30px; border: 1px solid #ccc; margin-left: 10px; font-size: 14px; padding: 6px 0px;}.item-file{ float: left; height: 30px; margin-left: 10px; font-size: 14px; padding: 6px 0px;}.item-submit{ float: left; height: 30px; width: 50px; margin-left: 90px; font-size: 14px;}{ border: 1px solid #E6594E;}ght{ border: 1px solid #7abd54;}{ float: left; height: 30px; line-height: 30px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 35px; color: red; background: url('../image/') no-repeat left center;}{ float: left; height: 30px; line-height: 30px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 35px; color: #aaa; background: url('../image/') no-repeat left center; padding-left: 35px;}{ background: url('../image/') no-repeat left center;}⾄此，表单验证就做好了，这⾥就不再展⽰了，看最前⾯即可。效果还可以，不过还可以更加完善，我对jQuery了解的也不太多，希望⼤家共同进步！源码下载：以上就是本⽂的全部内容，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。