jQuery Validate插件为表单提供了强大的验证功能，使得客户端的表单验证变得更加容易，并提供了大量的定制选项来满足应用程序的各种需求。

首先，导入js库

脚本类型=' text/JavaScript ' src=' http :%=path %/validate/jquery-1 . 6 . 2 . min . js '/script script type=' text/JavaScript ' src=' http :%=path %/validate/jquery . validate . min . js '/脚本注释：%=request.getContextPath()%返回web项目的根路径。

二、默认检查规则

(1)必填字段：必填字段

(2)remote :“remote-valid . JSP”使用ajax方法调用remote-valid.jsp来验证输入值

(3)电子邮件：请务必输入正确格式的电子邮件。

(4)url :必须以正确的格式输入URL

(5)日期：必须以正确的格式输入日期。日期验证ie6出错，请谨慎使用

(6)datetienhancetrue必须输入格式正确的日期(ISO)，例如：2009-06-23，1998-01-22，只验证格式，不验证有效性。

(7) number:true必须是合法的数字(负数、十进制数)

(8)数字：值必须是整数

(9)信用卡：必须输入合法的信用卡号

(10)equalto :的输入值“#password”必须与#password相同

(11) accept:输入带有合法后缀(上传文件的后缀)的字符串

(12) maxlength:5输入最大长度为5的字符串(汉字算作一个字符)

(13) minlength:10输入一个最小长度为10的字符串(汉字算作一个字符)

(14)，范围长度：[5，10]输入一个长度必须在5到10之间的字符串(中文字符算作一个字符)

(15)范围：[5，10]的输入值必须介于5和10之间

(16)、max:5输入值不能大于5

(17)min :10的输入值不能小于10

三、默认提示

消息{ required: '此字段为必填字段'，remote: '请修复此字段'，电子邮件：“请输入有效的电子邮件地址。”，url:“请输入有效的url。”，日期：“请输入有效的日期。”，日期ISO:“请输入有效的日期(国际标准化组织)。”，DateDE: ' Bitte geben Sie ein g倍数据in . '，数字：“请输入一个有效的数字。”，编号de : ' Bitte Geben Siein nummer ein '，digits: '请只输入数字'，creditcard: '请输入有效的信用卡号码'，等于：“请再次输入相同的值。”，accept:“请输入带有效扩展名的值。”，maxlength : $ . validator . format('请输入不超过{0}个字符')，min length : $ . validator . format('请至少输入{0}个字符')，range length : $ . validator . format('请输入长度介于{0}和{1}个字符之间的值。')，范围： $.validator.format('请输入一个介于{0}和{1}之间的值。)，最高：美元。validator.format('请输入一个小于或等于{0}的值。)，最低：美元。validator.format('请输入大于或等于{0}的值。)}，如果需要修改，可以添加：

$.扩展($。validator.messages，{ required: '必填字段'，remote: '，请更正此字段'，email: '，请输入格式正确的电子邮件'，url: '，请输入合法的网址'，日期： '，请输入合法的日期'，日期ISO: '请输入合法的日期(ISO)。'，number: '，合法号码'，digits: '，仅整数'，creditcard: '，合法信用卡号码'，等于： '，请再次输入相同的值'。Accept:“请输入带合法后缀名称的字符串”，maxlength3360 $。validator.format('请输入最大长度为{0} '的字符串)，minlength: $。validator.format('请输入最小长度为{0} '的字符串)。范围长度：美元。validator.format('请输入长度介于{0}和{1}之间的字符串)，范围为： $.validator.format('请输入一个介于{0}和{1}之间的值)。Max: $.validator.format('请输入最大值{0} ')、min: $.validator.format('请输入最小值{ 0 } ')})；推荐做法，将这个文件放在messages_cn.js中，并将其引入页面

脚本类型=' text/JavaScript ' src=' http :%=path %/validate/messages _ cn。js /脚本四、使用方式

1、元数据用法，将校验规则写到控件中

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“路径”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' title jquery Validate验证框架详解元数据用法/title meta http-equ v=' pragma ' content=' no-cache ' meta http-equ v=' cache-control ' content=' no-cache ' meta http-equ v=' expires ' content=' 0 ' meta http-equ v=' keywords ' content=' keywords 1，keywords 2，keywords 3 ' meta http-equ v=' description ' content='这是我的页面'脚本类型=' text/JavaScript ' src=' http :%=request .validate()；});/脚本/标题正文表单id='myform '方法='post '操作=' p '标签为='myname '用户名：/label！[构成形容词和名字最好同时写上-输入id='myname' name='myname' class='必填/p p标签为=' email '电子邮件：/标签输入id='email' name='email' class='必填电子邮件'/p标签为='密码'登陆密码：/label input id=' password ' name=' password ' type=' password ' class=' {必需的d : true，最小长度：5 } '//p p label for=' confirm _ password '确认密码：/label input id=' confirm _ password ' name=' confirm _ password ' type=' password ' class=' {必需d : true，minlength:5，等于： ' # password ' } '//p p label for=' confirm _ password '性别：/label！-表示必须选中一个-输入类型='radio' id='性别_男性'值='m '名称='性别class=' {必需的d : true } '/输入类型='radio' id='性别_女性'值='f '名称='性别/p p标签为='确认_密码'爱好：/label！-复选框的最小长度表示必须选中的最小个数，最大长度表示最大的选中个数，rangelength:[2，3]表示选中个数区间-输入类型='checkbox' id='spam_email '值='电子邮件'名称=' spam[]' class=' {必需的d : true，minlength:2}' /输入类型='checkbox' id='spam_phone '值='电话'名称='spam[]' /输入类型='checkbox' id='spam_mail '值='邮件'名称=' spam[]'/p p标签为='确认_密码'城市：/label select id='丛林名称='丛林标题='请选择一些东西!'class=' { required:true } '选项值=' '/选项值='1 '厦门/option选项值='2 '泉州/option选项值=' 3 ' Oi/选项/选择/p p输入类='提交'类型='提交'值='立即注册//p/form/body/html(9500 . 163.com)

使用class='{} '的方式，必须引入包：jquery。元数据。js；

可以使用如下的方法，修改提示内容：

class=' { required:true，minlength:5，messages: { required: '请输入内容'}}';在使用等于关键字时，后面的内容必须加上引号，如下代码：

class=' { required:true，minlength:5，equalTo:'#password'}'2，将校验规则写到射流研究…代码中

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' title jquery Validate验证框架详解/title meta http-equ v=' pragma ' content=' no-cache ' meta http-equ v=' cache-control ' content=' no-cache ' meta http-equ v=' expires ' content=' 0 ' meta http-equ v=' keywords ' content=' keywords 1，keywords 2，keywords 3 ' meta http-equ v=' description ' 内容='这是我的页面'脚本类型=' text/JavaScript ' src=' http :%=request .验证({ debug: true，//调试模式取消使服从的默认提交功能//errorClass: 'label.error '，//默认为错误的样式类为：错误focusInvalid: false，//当为错误的时，验证无效时，没有焦点响应onkeyup: false，submitHandler:函数（表单){ //表单提交句柄，为一回调函数，带一个参数：表单警报('提交表单'); 形式。submit()；//提交表单},规则： {我的名字： {必填项d : true }，电子邮件： {必填项d : true，电子邮件： true }，密码： {必需d : true，rangelength:[3，10] }，confirm _ password : {等于： ' # password ' }，消息： {我的名字3: {必填项d : }必填}，email:{ required: '必填，电子邮件： '电子邮件格式不正确}，password: { required: '不能为空，范围长度：美元.格式('密码最小长度：{0}, 最大长度：{1}。)}，confirm _ password : {等于： '两次密码输入不一致' } } });});/脚本/标题正文表单id='myform '方法='post '操作=' p '标签为='myname '用户名：/label！[构成形容词和名字最好同时写上-输入id='我的名字' name='我的名字'/p p标签为=' email '电子邮件：/标签输入id=' email ' name=' email '/p p标签为='密码'登陆密码：/label input id=' password ' name=' password ' type=' password '/p p label for=' confirm _ password '确认密码：/label input id=' confirm _ password ' name=' confirm _ password ' type=' password '/p p input class=' submit ' type=' submit ' value='立即注册//p/form/body/html(9501 . 163.com)

五、常用方法及注意问题

1、用其他方式替代默认的使服从

$(function(){ $(“# signing form”)).验证({ Submit handler : FuncTion(表单){ alert(' Submit！')));形式。submit()；} });});可以设置生效的默认值，写法如下：

$ .验证器。设置默认值({提交处理程序：函数（窗体){ alert('submit！');形式。submit()；}});如果想提交表单，需要使用form.submit()，而不要使用$(表单)。提交()

2、调试，只验证不提交表单

如果这个参数为没错，那么表单不会提交，只进行检查，调试时十分方便

$(function(){ $(“# signing form”)).验证({ debug 3360 true })；});如果一个页面中有多个表单都想设置成为调试，用

$ .验证器。setdefaults({ debug 3360 true })3、忽略：忽略某些元素不验证

忽略： ' ."忽略"

4、更改错误信息显示的位置

错误放置：回调

默认值：把错误信息放在验证的元素后面指明错误放置的位置，默认情况是：错误。appendto(元素。parent())；即把错误信息放在验证的元素后面

错误位置：函数（错误，元素){错误。appendo(元素。parent())；}//示例tr TD类=' label ' label id=' lfirst Name ' for=' first Name ' first Name/label/TD TD TD类=' field '输入id=' first Name ' Name=' first Name ' type=' text ' value=' maxlength=' 100 '/TD TD TD TD类=' status '/TD/trtr TD style=' padding-right 3360 5px；输入id=' dateformat _ eu ' name=' dateformat ' type=' radio ' value=' 0 '/label id=' ldateformat _ eu ' for=' dateformat _ eu ' 14/02/07/label/TD style=' padding-left : 5px；输入id=' dateformat _ am ' name=' dateformat ' type=' radio ' value=' 1 '/label id=' ldateformat _ am ' for=' dateformat _ am ' 02/14/07/label/TD/trtr TD class=' label '/TD TD TD class=' field ' col span=' 2 ' div id=' termswrap ' input id=' Terms ' type=' checkbox ' name=' Terms '/label id=' lters ' for=' Terms '我已阅读并接受条款/label/div/TD/trerrorplacement :函数（错误，元素){ if (element.is(':radio '))错误。appendo(元素。parent().下一个()。next())；else if(元素。是(' :复选框')错误。appendo(元素。next())；否则错误。appendo(元素。parent().next())；}代码的作用是：一般情况下把错误信息显示在td class='status'/td中，如果是收音机显示在td/td中，如果是检验盒显示在内容的后面

错误类别：字符串默认值："错误"指定错误提示的钢性铸铁类名，可以自定义错误提示的样式

错误元素：字符串默认值："标签"用什么标签标记错误，默认的是标签你可以改成全身长的

错误容器：选择器显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大

错误容器： ' #消息框1,#消息框2 '

错误标签容器：选择器

把错误信息统一放在一个容器里面。

包装：字符串

用什么标签再把上边的错误元素包起来

一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏

errorContainer: 'div.error '，错误label container : $(' # signing form div。错误')，wrapper: 'li'5，更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

input.error { border: 1px纯红；}标签。错误{背景： URL(' ./演示/图像/未选中。gif’)无重复0px 0px左填充left : 16pxpadding-bottom : 2px；字体粗细：粗体；color: # EA5200}标签。已检查{背景： URL(' ./演示/图片/已检查。gif’)无重复0px 0px}6、每个字段验证通过执行函数

成功：字符串，回调要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个钢性铸铁类，也可跟一个函数

成功：函数（标签){ //设置为IE标签. html(')的文本. addClass('选中');//label.addClass('有效')。文本('好的！')}添加"有效"到验证元素，在半铸钢钢性铸铁(铸造半钢)中定义的样式样式标签。有效{ }/样式成功：“有效”

7、验证的触发方式修改

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

a.onsubmit:布尔值默认值：为真提交时验证。设置唯错误的就用其他方法去验证

b.onfocusout:布尔值默认值：为真失去焦点是验证（不包括复选框/单选按钮)

c.onkeyup:布尔值默认值：为真在按键时验证。

d.onclick:布尔值默认值：为真在复选框和收音机点击时验证

e.focusInvalid:布尔值默认值：为真提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单)会获得焦点

f.focusCleanup:布尔默认值：假如果是真实的那么当未通过验证的元素获得焦点时，移除错误提示。避免和焦点有效一起用

8、异步验证

远程：网址

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

示例一：

remote: 'check-email.php '示例二：

远程： { URL : '检查-电子邮件。PHP '，//后台处理程序键入：“post”，//数据发送方式dataType: 'json '，//接受数据格式data: { //要传递的数据用户名：函数(){ return $(“# username”).val()；} }}远程地址只能输出真的或'假，不能有其它输出。

9、添加自定义校验

添加方法：名称、方法、消息

自定义验证方法

//中文字两个字节jquery。验证器。add method(' byteranglenth '，函数（值，元素，参数){ var length=value . length for(var I=0；我值。长度；I){ if(value。charcodeat(I)127){长度；} }返回这个。可选(元素)| |(长度=param[0]长度=param[1])；}，$.validator.format('请确保输入的值在{0}-{1}个字节之间（一个中文字算2个字节)'));//邮政编码验证jquery。验证器。addmethod(' iszipcode '，function(value，element){ var tel=/^[0-9]{6}$/；返回这个。可选(元素)| |(电话。测试(值))；}, '请正确填写您的邮政编码');1.要在附加-methods.js文件中添加或者在jquery.validate.js添加建议一般写在附加-methods.js文件中

2.在messages_cn.js文件添加：isZipCode: '只能包括中文字、英文字母、数字和下划线，调用前要添加对附加-methods.js文件的引用。

收音机和复选框、选择的验证

1 .无线电的需要表示必须选中一个

输入类型='radio' id='性别_男性'值='m '名称='性别class=' {必需的d : true } '/输入类型='radio' id='性别_女性'值='f '名称='性别/2 .复选框的需要表示必须选中

输入类型=' checkbox ' class=' checkbox ' id=' agree ' name=' agree ' class=' {必需的d : true } '/checkbox的最小长度表示必须选中的最小个数，最大长度表示最大的选中个数，rangelength:[2，3]表示选中个数区间

输入类型='checkbox' id='spam_email '值='电子邮件'名称=' spam[]' class=' {必需的d : true，最小长度：2 } '/输入类型='checkbox' id='spam_phone '值='电话'名称='spam[]' /输入类型='checkbox' id='spam_mail '值='邮件'名称='spam[]' /3选择。的需要表示选中的价值不能为空

选择id='丛林'名称='丛林'标题='请选择一些东西!'class=' { required:true } '选项值=' '/选项值=' 1 ' Buga/选项值=' 2 ' Baga/选项值=' 3 ' Oi/选项/selectselect的最小长度表示选中的最小个数（可多选的选择),最大长度表示最大的选中个数，rangelength:[2，3]表示选中个数区间

选择id='水果'名称='水果'标题='请至少选择两种水果class=' { required:true，最小长度：2 } ' multiple=' multiple '选项值='b '香蕉/选项值='a '苹果/选项值='p '桃子/选项值='t '海龟/选项/选择以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。