jQuery校验官网地址：http://bassistance。de/jquery-plugins/jquery-plugin-validation

一、导入射流研究…库

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

二、默认校验规则

(1)、要求：道必输字段(2)、远程：”远程有效。JSP "使用创建交互式、快速动态网页应用的网页开发技术方法调用remote-valid.jsp验证输入值(3)、电子邮件：必须输入正确格式的电子邮件(4)、url:true路径路径必须输入正确格式的网址(5)、日期：必须输入正确格式的日期，日期校验ie6出错，慎用(6)、日期：日期必须输入正确格式的日期（国际标准化组织),例如：2009-06-23,1998/01/22 只验证格式，不验证有效性(7)、路必须输入合法的数字（负数，小数)(8)、数字：街必须输入整数(9)、信用卡：必须输入合法的信用卡号(10)、等于： ' #密码'输入值必须和#密码相同(11)、接受：输入拥有合法后缀名的字符串（上传文件的后缀)(12)、最大长度：5输入长度最多是5的字符串（汉字算一个字符)(13)、最小长度：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: "请输入有效的日期（国际标准化组织)。",日期： ' Bitte geben Sie in g眉"基准日期",数字："请输入一个有效的数字“，数字：”您可以在任何地方使用它，digits: '请只输入数字，信用卡： '请输入有效的信用卡号码，等于："请再次输入相同的值”，accept:”请输入带有效扩展名的值”，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: '只能输入整数，信用卡： '请输入合法的信用卡号，等于： '请再次输入相同的值，accept: '请输入拥有合法后缀名的字符串，maxlength : $。验证器。格式('请输入一个长度最多是{0} 的字符串)，最小长度：美元。验证器。格式('请输入一个长度最少是{0} 的字符串)，范围长度： $。验证器。格式('请输入一个长度介于{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()“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 ' 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()“路径”/；%!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()；//提交表单},规则： { myname : {必填项d : true }，电子邮件： {必填项d : true，电子邮件： true }，密码： {必需d : true，rangelength:[3，10] }，confirm _ password : {等于： ' # password ' }，消息： { myname : {必填项d 3: }必填}，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('有效')。文本('好的！')}添加"有效"到验证元素，在半铸钢钢性铸铁(铸造半钢)中定义的样式stylelabel.valid {}/style

成功： '有效'

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 '海龟/选项/选择