本文主要详细介绍jQuery验证插件validate的使用。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
1. 写在前面
我们知道，用户注册的时候会有一个表单页面，然后需要一些选项，需要填写的一些内容是标准化的。这些必须在用户提交之前进行验证。如果不符合要求，需要在右侧显示友好的提示，供用户修改。
记得以前在学习Servlet的时候，一个简单的用户注册功能的验证都是在后台完成的。有些正则表达式用了，有些没用，但都比较简单。过程是这样的。前台提交表单数据后，servlet先获取数据并验证。如果不符合要求，它将提示信息放在一个列表中，然后在会话中保存该列表，跳转到一个新页面并显示错误信息，但这相当繁琐。
之前做网上商城项目的时候，用EasyUI添加后台商品的时候，也做了验证功能。EasyUI自带验证功能，还是很强大的，效果也不错。有兴趣的话可以看看这篇文章。
但是对于前端用户注册的页面该怎么办呢？这就是本文的主要内容。我们可以使用jQuery的Validate插件来验证注册。我对jQuery也没有系统的研究。我只是学习用什么，知道用什么，如有错误请留言指正~我会通过代码一步步介绍jQuery-Validate插件的使用步骤。
2. 效果展示
首先我们来看看最后的效果。首先，我们有一个直观的感受。我个人感觉可以接受。
从图中可以看出，已经完成了包括输入前提示和正误提示在内的功能。再次查看我的项目：
总共有六个jsp文件。之所以写六个JSP文件，是为了一步步的解释做这个效果的步骤。最后，terminal.jsp是最终版本。在运行时，你只需要运行这个terminal.jsp。我将在下面详细分析使用jQurey-Validate验证插件的过程。
3. Validate环境的搭建
要构建环境，jar包肯定是不可或缺的。我用的是jQuery-validate-1.15，官方给出了几个版本的jQuery。我下载了jQuery-1.11.1。所以把这两个js文件放在项目的WebRoot/js中，导入到jsp页面中。
Demo1.jsp很简单，只是建造环境。如果您单击Submit，您将不会跳转到指定的页面来指示环境已经成功构建。
4. Validate基本方法的使用
好了，环境搭建成功了。接下来，我们开始使用验证的基本方法。这里我们要导入一个js文件：additional-methods.js，新版本的jQuery-validate-1.15不验证文件的后缀。后来在官网查了一下，官网说放入了additional-methods.js，就去下一个，放在项目里了。看看demo2.jsp:
% @ page language=' Java ' import=' Java . util . * ' page encoding=' UTF-8 ' %
！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN '
超文本标记语言
头
Titlejquery验证验证/title
脚本类型=' text/JavaScript ' src=' js/jquery-1 . 11 . 1 . js '/script
脚本类型=' text/JavaScript ' src=' js/jquery . validate . js '/script
脚本类型=' text/JavaScript ' src=' js/additional-methods . js '/script
脚本类型='文本/javascript '
$(function(){
//让当前表单调用validate方法实现表单验证功能。
$('#ff ')。验证({
Debug:true，//调试模式，即使验证成功，也不会跳转到目标页面。
规则：{ //配置验证规则，key是要验证的dom对象，value是调用验证的方法(也是json格式)
名称：{
必选：true，//必选。如果验证方法不需要参数，则设置为true。
范围长度：[6，12]
},
spass:{
必填：真，
范围长度：[6，12]
},
spa S2:{
必填：真，
equal to:“# spam”//表示与ID=“spam”相同的值
},
slike:{
必填：真，
},
semail:{
必填：真，
电子邮件：真的
},
图像：{
必填：真，
扩展：' gif|jpe？' g|png '
}
}
});
});
/脚本
/头
身体
！-
保险商实验所
李演示基本方法的使用/李
lijquery.validate.js中的260行具有默认验证配置/li
lijquery.validate.js中的第354行有验证方法错误的消息，它告诉我们有哪些可用的验证方法/li
/ul
-
form id=' ff ' action=' http://www . Hao 123 . com ' method=' post '
name:input type=' text ' name=' sname '/br/
密码：输入类型=' password ' name=' spam ' id=' spam '/br/
密码确认：输入类型=' password' name=' spass2'/br/
爱好：
上线：input type=' checkbox ' name=' slide ' value='上线'/
singing:input type=' checkbox ' name=' slide ' value=' singing '/
编程：input type=' checkbox ' name=' slide ' value=' programming '/
书法：输入类型='复选框'名称='幻灯片'值='书法'/br/
电子邮件：input type=' text ' name=' semail '/br/
avatar:input type=' file ' name=' simage '/br/
输入类型='提交'值='提交'
/表单
/body
/html
在demo2中，我们已经编写了一些基本的表单，并在js中进行了验证。验证中定义了一些默认验证。required表示必填字段，rangelength表示长度范围，array表示范围边界。equalTo后面跟一个id，这意味着元素内容与它后面的id内容相同。在这里，我们将谈论扩展，这意味着后缀。以前的版本叫accept，新版本改成了extension。关于后缀验证的网上搜索是accept，但是新版本没有了，扩展在新增加的additional-methods.js我们来看看这个版本的效果：
有点难看.因为我还没有做过css，但是我只要点击提交，就会出现一些验证信息。这些是默认信息，在源代码中提供。说明验证功能生效。让我们重写后面显示的信息。这些默认的显然不太友好。
5. 实现错误消息的本地化
我们可以指定messages消息的显示内容，也是json格式，如下所示：
% @ page language=' Java ' import=' Java . util . * ' page encoding=' UTF-8 ' %
！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN '
超文本标记语言
头
Titlejquery验证验证/title
脚本类型=' text/JavaScript ' src=' jquery-1 . 11 . 1 . js '/script
脚本类型=' text/JavaScript ' src=' jquery . validate . js '/script
脚本类型=' text/JavaScript ' src=' additional-methods . js '/script
脚本类型='文本/javascript '
$(function(){
//让当前表单调用validate方法实现表单验证功能。
$('#ff ')。验证({
Debug:true，//调试模式，即使验证成功，也不会跳转到目标页面。
规则：{ //配置验证规则，key是要验证的dom对象，value是调用验证的方法(也是json格式)
名称：{
必选：true，//必选。如果验证方法不需要参数，则设置为true。
范围长度：[6，12]
},
spass:{
必填：真，
范围长度：[6，12]
},
spa S2:{
必填：真，
equal to:“# spam”//表示与ID=“spam”相同的值
},
sad address:{
必填：真
},
semail:{
必填：真，
电子邮件：真的
},
图像：{
必填：真，
扩展：' gif|jpe？' g|png '
}
},
消息：{
名称：{
必填：“请输入用户名”，
Rangelength:$.validator.format('用户名的长度必须介于：{0}-{1} ')
},
spass:{
必填：“请输入密码”，
Rangelength:$.validator.format('字段长度必须介于：{0}-{1} ')
},
spa S2:{
必填：“请再次输入密码”，
EqualTo:'两个密码必须相同'//表示与ID=' spam '相同的值
},
sad address:{
必填：“请选择一个地址”
},
semail:{
必填：'请填写邮件'，
电子邮件：“不正确的邮箱格式”
},
图像：{
必填：'请选择要上传的头像'，
扩展名：“文件扩展名必须是jpg、jpeg、gif、png”
}
}
});
});
/脚本
/头
身体
！-正文中内容不变，故省略不写-
/body
/html
相当于覆盖了原来默认的消息提示。我们来看看效果：
这是一点感觉。不断进步。
6. 实现远程验证
所谓远程认证，就是用户在注册时输入用户名，系统要从数据库中查询该用户名是否已经存在。如果有，它会告诉用户已经有人注册了这个名字，但是我们不需要去查数据库。我们可以只写一个动作模拟，主要实现验证插件和动作之间的通信。看看demo4.jsp:
% @ page language=' Java ' import=' Java . util . * ' page encoding=' UTF-8 ' %
！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN '
超文本标记语言
头
Titlejquery验证验证/title
脚本类型=' text/JavaScript ' src=' js/jquery-1 . 11 . 1 . js '/script
脚本类型=' text/JavaScript ' src=' js/jquery . validate . js '/script
脚本类型=' text/JavaScript ' src=' js/additional-methods . js '/script
脚本类型='文本/javascript '
$(function(){
//让当前表单调用validate方法实现表单验证功能。
$('#ff ')。验证({
Debug:true，//调试模式，即使验证成功，也不会跳转到目标页面。
Onkeyup:null，//焦点丢失时触发验证请求。
规则：{ //配置验证规则，key是要验证的dom对象，value是调用验证的方法(也是json格式)
名称：{
必选：true，//必选。如果验证方法不需要参数，则设置为true。
范围长度：[3，12]，
远程：{
url:'ajax_check.action '，
类型：“发布”
}
},
spass:{
必填：真，
范围长度：[6，12]
},
spa S2:{
必填：真，
equal to:“# spam”//表示与ID=“spam”相同的值
},
sad address:{
必填：真
},
semail:{
必填：真，
电子邮件：真的
},
图像：{
必填：真，
扩展：' gif|jpe？' g|png '
}
},
消息：{
名称：{
必填：“请输入用户名”，
Rangelength:$.validator.format('用户名的长度必须介于：{0}-{1} ')，
远程：“用户名已经存在！”
},
spass:{
必填：“请输入密码”，
Rangelength:$.validator.format('字段长度必须介于：{0}-{1} ')
},
spa S2:{
必填：“请再次输入密码”，
EqualTo:'两个密码必须相同'//表示与ID=' spam '相同的值
},
sad address:{
必填：“请选择一个地址”
},
semail:{
必填：'请填写邮件'，
电子邮件：“不正确的邮箱格式”
},
图像：{
必填：'请选择要上传的头像'，
扩展名：“文件扩展名必须是jpg、jpeg、gif、png”
}
}
});
});
/脚本
/头
身体
！-正文中内容不变，故省略不写-
/body
/html
我们看到sname中添加了一个新的远程方法，用于远程验证。参数url是要发送的请求动作，所以我们在后台写一个AjaxAction，在AjaxAction中写一个check方法来判断用户名是否为admin。如果是，它将以流的形式返回false。如果前台接收到false，则验证失败，如果为true，则验证成功。如果失败，告诉用户用户名已经存在，这里就不写后台动作了。看我上传的源代码。我们来看看效果：
7. 自定义验证方法
我们还可以自定义验证方式，比如手机号。我们可以自己定义验证方法，我们定义的方法最好用扩展的js来写。我们自己编写一个jquery.validate.extend.js，放在js文件夹中，并编写：
//自定义方法完成手机号码的验证。
//名称：自定义方法的名称，方法：函数体，消息：错误消息
$.validator.addMethod('phone '，function(value，element，param){
//方法中多了三个参数：value:已验证的值，element:当前已验证的dom对象，param: parameter(多了就是数组)
//alert(value '，' $(element)。val()'，' param[0]'，' param[1])；
返回新RegExp(/^1[3458]\d{9}$/).测试(值)；
}、‘手机号不正确’)；
Add表示新添加的方法，第一个参数是方法名，第二个参数是函数体，第三个参数表示验证错误消息。在函数体中，还有三个参数，value表示验证的值，element表示当前dom对象，param表示参数。我们使用正则表达式来验证手机号码。这里就不测试了。最后，我们来看看终极形态验证。CSS需要添加到最终的验证表单中。这里是完整的终极验证码。
8. 验证表单完整版
8.1 Html表单
为了让表单结构简单而清晰，我们将表单的每个元素都包裹在一个差异结构中：用标签标签用来标记元素的名称，接着便是表单元素本身。【注明：1.使用标签标签的好处是为鼠标用户改进了可用性。当在标签元素内点击文本时，浏览器就会自动将焦点转到和标签相关的表单控件上。2.每个需要校验的表单元素都应该设置身份证明(识别)和名字属性，方便在使用插件时将元素绑定校验规则和校验信息。】
表单实现代码如下：
% @页语言=' Java '导入=' Java。util。* "页面编码=' UTF-8 ' %
！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN '
超文本标记语言
头
titlejquery验证验证/标题
link rel='样式表' href=' CSS/form。CSS '/
脚本类型=' text/JavaScript ' src=' js/jquery-1。11 .1 .js '/脚本
脚本类型=' text/JavaScript ' src=' js/jquery。验证。js '/脚本
脚本类型=' text/JavaScript ' src=' js/additional-methods。js '/脚本
脚本类型=' text/JavaScript ' src=' js/jquery。验证。延伸。js '/脚本
脚本类型='文本/javascript '
$(function(){
//让当前表单调用使生效方法，实现表单验证功能
$('#ff ').验证({
调试：真，//调试模式，即使验证成功也不会跳转到目标页面
规则：{ //配置验证规则，键就是被验证的数字正射影像图对象，值就是调用验证的方法（也是json格式)
名称：{
必选：true，//必填。如果验证方法不需要参数，则配置为真实的
范围长度：[4,12],
远程：{
url:'ajax_check.action '，
类型："发布"
}
},
spass:{
必填：真，
范围长度：[6,16]
},
S2水疗中心：{
必填：真，
等于：" # password"//表示和id='spass '的值相同
},
悲伤地址：{
必填：真
},
sphone:{
必填：真，
电话：真的
},
slike:{
必填：真，
},
semail:{
必填：真，
电子邮件：真的
},
图像：{
必填：真，
扩展：' gif|jpe？'' g|png '
}
},
消息：{
名称：{
'必填：'请输入用户名，
rangelength:$.validator.format('用户名长度为{0}-{1}个字符'),
远程：'该用户名已存在!'
},
spass:{
'必填：'请输入密码，
rangelength:$.validator.format('密码长度为{0}-{1}个字符)
},
S2水疗中心：{
'必填：'请再次输入密码，
'等于：'两次密码必须一致' //表示和id='spass '的值相同
},
sphone:{
'必填：'请输入手机号'
},
悲伤地址：{
'必填：'请选择地址'
},
slike:{
'必填：'请选择爱好，
},
semail:{
'必填：'请填写邮件，
电子邮件：'邮箱格式不正确'
},
图像：{
'必填：'请选择要上传的头像，
'分机：'文件后缀名必须为' jpg，jpeg，gif，png '
}
}
});
});
/脚本
/头
身体
表单action=' http://www。郝123。“com”方法=“post”id=“ff”
字段集
legendjQuery-验证表单校验验证/图例
div class='item '
的标签='用户名' class='项目标签'用户名：/标签
input type=' text ' id=' username ' name=' sname ' class=' item-text ' placeholder='设置用户名'
autocomplete='off' tip='请输入用户名'
/div
div class='item '
的标签='password' class='item-label '密码：/标签
输入类型=' password ' id=' password ' name=' spass ' class=' item-text '
占位符='设置密码提示='长度为6-16个字符'
/div
div class='item '
的标签='password' class='item-label '确认密码：/标签
输入type=' password ' name=' spass 2 ' class=' item-text ' placeholder='设置确认密码'
/div
div class='item '
的标签='phone' class='item-label '手机号码：/标签
input type=' text ' id=' phone ' name=' sp phone ' class=' item-text ' placeholder='输入手机号码提示='请输入手机号码'
/div
div class='item '
'项目标签'的标签所在地：/标签
select name=' s address ' class=' item-select '
选项值=""-请选择-/选项
选项值='北京'北京/选项
选项值='上海'上海/选项
选项值='深圳'深圳/选项
/选择
/div
div class='item '
的标签='slike' class='item-label '爱好：/标签
上网：输入类型='checkbox' name='slike' value='上网'/
唱歌：输入类型='checkbox' name='slike' value='唱歌'/
编程：input type=' checkbox ' name=' slide ' value=' programming '/
书法：输入类型='复选框'名称='幻灯片'值='书法'/br/
/div
div class='item '
label=' semail ' class=' item-label '电子邮件：/label
type=' text ' id=' semail ' name=' semail ' class=' item-text ' placeholder='设置邮箱'
Autocomplete='off' tip='请输入您的电子邮件地址'
/div
div class='item '
label=' simage ' class=' item-label '头像：/label
输入类型=' file ' name=' simage ' class=' item-file '
/div
div class='item '
type=' submit ' value=' submit ' class=' item-submit '
/div
/字段集
/表单
/body
/html
8.2 表单验证js逻辑
然后我们使用js来验证表单元素。检查之前，我扩展了jquery validate插件的功能，重写了默认选项。默认情况下，jquery validate插件只提供检查正确性和错误的提示，缺少我们常见的帮助信息提示。为了解决这个问题，我研究了插件的源代码，发现插件本身提供了两个函数：onfocusin(当check元素获得焦点时调用)和onfocusout(当check元素失去焦点时调用)。通过修改默认参数的这两个界面，可以在聚会用户点击或选择某个元素时提示帮助信息(即该元素获得焦点)；当用户鼠标离开元素时(即，元素失去焦点)，帮助信息被移除。
此外，默认情况下，jquery validate在输入表单元素时提供实时验证。因为我们要求输入时只提示用户帮助信息，所以需要关闭输入的实时验证。因此，我们将缺省参数中的onkeyup设置为null。
我把具体的扩展和改进代码放到新的js脚本jquery.validate.extend.js中，代码如下：
/* * * * * * * * * * * * * * * * * * * * * * * *新增插件功能-设置插件验证器的默认参数* * * * * * * * * * * * * * * *
$.validator.setDefaults({
/*键盘输入关闭时的实时验证*/
onkeyup: null，
/*验证成功后添加执行函数-修改提示内容，为正确的提示信息添加新样式(默认有效)*/
成功：功能(标签){
/*默认的/*标签的正确样式是有效的，需要validClass重置，否则此处添加的其他样式无法清除*/
label.text(“”)。add class(“valid”)；
},
/*在check元素获得焦点后重写执行函数——增加两个功能点[1。光标移动到元素中时的帮助提示，2。突出显示检查元素] */
onfocusin:函数(元素){
this.lastActive=element
/*1.帮助提示功能*/
this . add wrapper(this . errors for(element))。hide()；
var tip=$(元素)。attr(' tip ')；
//alert(提示)；
if(tip $(element)。父级()。孩子(’。提示)。长度===0){
$(元素)。父级()。append(' label class=' tip ' ' tip '/label))；
}
/*2.突出显示检查元素*/
$(元素)。addClass(“突出显示”)；
//隐藏错误标签并移除焦点上的错误类(如果已启用)
if(this . settings . focuscleanup){
if ( this.settings.unhighlight ) {
this . settings . unhighlight . call(this，element，this.settings.errorClass，this . settings . valid class)；
}
this . hide these(this . errors for(element))；
}
},
/*当check元素的焦点离开时重写执行函数-remove [1。添加了帮助提示，2。突出显示检查元素] */
onfocusout:函数(元素){
/*1.帮助提示信息删除*/
$(元素)。父级()。孩子(’。提示)。移除()；
/*2.检查元素的突出显示样式是否已删除*/
$(元素)。removeClass('高亮')；
/*3.替换下面提到的原始代码，每当光标离开元素时，就会触发check函数*/
//this.element(元素)；
如果(！this . checkable(element)(this . submitted中的element . name | |！this.optional( element ) ) ) {
this.element(元素)；
}
}
});
//自定义方法完成手机号码的验证。
//名称：自定义方法的名称，方法：函数体，消息：错误消息
$.validator.addMethod('phone '，function(value，element，param){
//方法中多了三个参数：value:已验证的值，element:当前已验证的dom对象，param: parameter(多了就是数组)
//alert(value '，' $(element)。val()'，' param[0]'，' param[1])；
返回新RegExp(/^1[3458]\d{9}$/).测试(值)；
}, '手机号码不正确');
8.3 表单验证css样式
最后还要为页面元素添加钢性铸铁样式。插件中有一系列默认选项：其中默认错误显示标签为标签，错误样式为标签。错误。上面在jquery.validate.extend.js文件中，有一个成功函数需要说明一下。这个函数是在校验成功的时候执行的，我们在函数中为标签提示标签添加了校验正确对应的样式标签。有效。因此在钢性铸铁中如果要美化信息提示，需要对标签相关样式如错误，有效样式进行设计。此外我们在扩展插件功能中添加了一个班级为小费的标签标签，该标签仅在校验元素获得焦点时生成。为此，还需要设置标签的小费样式。
完整的样式文件内容具体如下：
正文{
字体系列：微软雅黑；
字号：15px
}
字段集{宽度：650 px}
图例{
文本对齐：居中；
字体大小：20px
}。项目{
高度：56px
行高：30px
边距：10px
}。项目。项目标签{
浮动：左；
宽度：80px
文本对齐：右对齐；
}。项目-文本{
浮动：左；
宽度：240像素
高度：30px
填充：9px 25px 9px 5px
左边距：10px
边框：1px纯色# ccc
溢出：隐藏；
}。项目选择{
浮动：左；
高度：30px
边框：1px纯色# ccc
左边距：10px
字体大小：14px
填充：6px 0px
}。项目-文件{
浮动：左；
高度：30px
左边距：10px
字体大小：14px
填充：6px 0px
}。项目-提交{
浮动：左；
高度：30px
宽度：50px
左边距：90px
字体大小：14px
}
输入错误{
边框：1px纯色# E6594E
}
input.highlight{
边框：1px固体# 7 Abd 54
}
label.error{
浮动：左；
高度：30px
行高：30px
字体大小：14px
文本对齐：左对齐；
左边距：5px
左填充：35px
颜色：红色；
背景：url('./image/error.png ')不重复左居中；
}
标签。提示{
浮动：左；
高度：30px
行高：30px
字体大小：14px
文本对齐：左对齐；
左边距：5px
左填充：35px
颜色：# aaa
背景：url('./image/tip . png’)不重复左居中；
左填充：35px
}
标签。有效{
背景：url('./image/valid。png’)不重复左居中；
}
至此，表单验证就做好了，这里就不再展示了，看最前面即可。效果还可以，不过还可以更加完善，我对jQuery了解的也不太多，希望大家共同进步！
源码下载：验证插件使生效
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。