本文主要详细介绍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了解的也不太多，希望大家共同进步！

源码下载：验证插件使生效

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持我们。