jQuery Validate验证框架详解.docx

jQuery Validate验证框架详解.docx

《jQuery Validate验证框架详解.docx》由会员分享，可在线阅读，更多相关《jQuery Validate验证框架详解.docx（9页珍藏版）》请在冰豆网上搜索。

jQueryValidate验证框架详解

jQueryValidate验证框架详解（此处标题超链接）

链接地址：

一、导入js库

注：

<%=request.getContextPath（）%>返回web项目的根路径。

二、默认校验规则

（1）、required:

true必输字段

（2）、remote:

"remote-valid.jsp"使用ajax方法调用remote-valid.jsp验证输入值

（3）、email:

true必须输入正确格式的电子邮件

（4）、url:

true必须输入正确格式的网址

（5）、date:

true必须输入正确格式的日期，日期校验ie6出错，慎用

（6）、dateISO:

true必须输入正确格式的日期（ISO），例如：

2009-06-23，1998/01/22只验证格式，不验证有效性

（7）、number:

true必须输入合法的数字（负数，小数）

（8）、digits:

true必须输入整数

（9）、creditcard:

true必须输入合法的信用卡号

（10）、equalTo:

"#password"输入值必须和#password相同

（11）、accept:

输入拥有合法后缀名的字符串（上传文件的后缀）

（12）、maxlength:

5输入长度最多是5的字符串（汉字算一个字符）

（13）、minlength:

10输入长度最小是10的字符串（汉字算一个字符）

（14）、rangelength:

[5,10]输入长度必须介于5和10之间的字符串"）（汉字算一个字符）

（15）、range:

[5,10]输入值必须介于5和10之间

（16）、max:

5输入值不能大于5

（17）、min:

10输入值不能小于10

三、默认的提示

messages:

{

required:

"Thisfieldisrequired.",

remote:

"Pleasefixthisfield.",

email:

"Pleaseenteravalidemailaddress.",

url:

"PleaseenteravalidURL.",

date:

"Pleaseenteravaliddate.",

dateISO:

"Pleaseenteravaliddate（ISO）.",

dateDE:

"BittegebenSieeing眉ltigesDatumein.",

number:

"Pleaseenteravalidnumber.",

numberDE:

"BittegebenSieeineNummerein.",

digits:

"Pleaseenteronlydigits",

creditcard:

"Pleaseenteravalidcreditcardnumber.",

equalTo:

"Pleaseenterthesamevalueagain.",

accept:

"Pleaseenteravaluewithavalidextension.",

maxlength:

$.validator.format（"Pleaseenternomorethan{0}characters."）,

minlength:

$.validator.format（"Pleaseenteratleast{0}characters."）,

rangelength:

$.validator.format（"Pleaseenteravaluebetween{0}and{1}characterslong."）,

range:

$.validator.format（"Pleaseenteravaluebetween{0}and{1}."）,

max:

$.validator.format（"Pleaseenteravaluelessthanorequalto{0}."）,

min:

$.validator.format（"Pleaseenteravaluegreaterthanorequalto{0}."）

},

如需要修改，可在js代码中加入：

$.extend（$.validator.messages,{

required:

"必选字段",

remote:

"请修正该字段",

email:

"请输入正确格式的电子邮件",

url:

"请输入合法的网址",

date:

"请输入合法的日期",

dateISO:

"请输入合法的日期（ISO）.",

number:

"请输入合法的数字",

digits:

"只能输入整数",

creditcard:

"请输入合法的信用卡号",

equalTo:

"请再次输入相同的值",

accept:

"请输入拥有合法后缀名的字符串",

maxlength:

$.validator.format（"请输入一个长度最多是{0}的字符串"）,

minlength:

$.validator.format（"请输入一个长度最少是{0}的字符串"）,

rangelength:

$.validator.format（"请输入一个长度介于{0}和{1}之间的字符串"）,

range:

$.validator.format（"请输入一个介于{0}和{1}之间的值"）,

max:

$.validator.format（"请输入一个最大为{0}的值"）,

min:

$.validator.format（"请输入一个最小为{0}的值"）

}）;

推荐做法，将此文件放入messages_cn.js中，在页面中引入

四、使用方式

1、metadata用法，将校验规则写到控件中

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath（）;StringbasePath=request.getScheme（）+":

//"+request.getServerName（）+":

"+request.getServerPort（）+path+"/";%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">">$（function（）{$（"#myform"）.validate（）;}）;

用户名：

--id和name最好同时写上-->

E-Mail：

登陆密码：

true,minlength:

5}"/>

确认密码：

true,minlength:

5,equalTo:

'#password'}"/>

性别：

--表示必须选中一个-->

true}"/>

爱好：

--checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:

[2,3]表示选中个数区间-->

true,minlength:

2}"/>

城市：

"class="{required:

true}">厦门泉州Oi

使用class="{}"的方式，必须引入包：

jquery.metadata.js；

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

class="{required:

true,minlength:

5,messages:

{required:

'请输入内容'}}"；

在使用equalTo关键字时，后面的内容必须加上引号，如下代码：

class="{required:

true,minlength:

5,equalTo:

'#password'}"。

2、将校验规则写到js代码中

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath（）;StringbasePath=request.getScheme（）+":

//"+request.getServerName（）+":

"+request.getServerPort（）+path+"/";%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">">$（function（）{varvalidate=$（"#myform"）.validate（{debug:

true,//调试模式取消submit的默认提交功能//errorClass:

"label.error",//默认为错误的样式类为：

errorfocusInvalid:

false,//当为false时，验证无效时，没有焦点响应

onkeyup:

false,submitHandler:

function（form）{//表单提交句柄,为一回调函数，带一个参数：

form

alert（"提交表单"）;form.submit（）;//提交表单},rules:

{myname:

{required:

true},email:

{required:

true,email:

true},password:

{required:

true,rangelength:

[3,10]},confirm_password:

{equalTo:

"#password"}},messages:

{myname:

{required:

"必填"},email:

{required:

"必填",email:

"E-Mail格式不正确"},password:

{required:

"不能为空",rangelength:

$.format（"密码最小长度:

{0},最大长度:

{1}。

"）},confirm_password:

{equalTo:

"两次密码输入不一致"}}}）;}）;

用户名：

--id和name最好同时写上-->

E-Mail：

登陆密码：

确认密码：

五、常用方法及注意问题

1、用其他方式替代默认的submit

$（function（）{$（"#signupForm"）.validate（{submitHandler:

function（form）{alert（"submit!

"）;form.submit（）;}}）;}）;

可以设置validate的默认值，写法如下：

$.validator.setDefaults（{

submitHandler:

function（form）{alert（"submit!

"）;form.submit（）;}

}）;

如果想提交表单，需要使用form.submit（），而不要使用$（form）.submit（）

2、debug，只验证不提交表单

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

$（function（）{$（"#signupForm"）.validate（{debug:

true}）;}）;

如果一个页面中有多个表单都想设置成为debug，用

$.validator.setDefaults（{

debug:

true

}）

3、ignore：

忽略某些元素不验证

ignore:

".ignore"

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

errorPlacement：

Callback

Default:

把错误信息放在验证的元素后面 

指明错误放置的位置，默认情况是：

error.appendTo（element.parent（））;即把错误信息放在验证的元素后面 

errorPlacement:

function（error,element）{ 

   error.appendTo（element.parent（））; 

}

//示例

FirstName

5px;">14/02/07

5px;">02/14/07 IhavereadandaccepttheTermsofUse.