jqueryvalidatejs.docx

jqueryvalidatejs.docx

《jqueryvalidatejs.docx》由会员分享，可在线阅读，更多相关《jqueryvalidatejs.docx（42页珍藏版）》请在冰豆网上搜索。

jqueryvalidatejs

jquery.validate.js

一、用前必备当前版本：

1.5.5

需要JQuery版本：

1.2.6+,兼容1.3.2

二、默认校验规则

（1）required:

true              必输字段

（2）remote:

"check.php"         使用ajax方法调用check.php验证输入值

（3）email:

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

（4）url:

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

（5）date:

true                  必须输入正确格式的日期

（6）dateISO:

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

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

（7）number:

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

（8）digits:

true                必须输入整数

（9）creditcard:

                必须输入合法的信用卡号

（10）equalTo:

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

（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

三、默认的提示

Js代码 

messages:

 {  

    required:

 "This field is required.",  

    remote:

 "Please fix this field.",  

    email:

 "Please enter a valid email address.",  

    url:

 "Please enter a valid URL.",  

    date:

 "Please enter a valid date.",  

    dateISO:

 "Please enter a valid date （ISO）.",  

    dateDE:

 "Bitte geben Sie ein g眉ltiges Datum ein.",  

    number:

 "Please enter a valid number.",  

    numberDE:

 "Bitte geben Sie eine Nummer ein.",  

    digits:

 "Please enter only digits",  

    creditcard:

 "Please enter a valid credit card number.",  

    equalTo:

 "Please enter the same value again.",  

    accept:

 "Please enter a value with a valid extension.",  

    maxlength:

 $.validator.format（"Please enter no more than {0} characters."）,  

    minlength:

 $.validator.format（"Please enter at least {0} characters."）,  

    rangelength:

 $.validator.format（"Please enter a value between {0} and {1} characters long."）,  

    range:

 $.validator.format（"Please enter a value between {0} and {1}."）,  

    max:

 $.validator.format（"Please enter a value less than or equal to {0}."）,  

    min:

 $.validator.format（"Please enter a value greater than or equal to {0}."）  

},  

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

Js代码 

jQuery.extend（jQuery.validator.messages, {  

        required:

 "必选字段",  

  remote:

 "请修正该字段",  

  email:

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

  url:

 "请输入合法的网址",  

  date:

 "请输入合法的日期",  

  dateISO:

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

  number:

 "请输入合法的数字",  

  digits:

 "只能输入整数",  

  creditcard:

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

  equalTo:

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

  accept:

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

  maxlength:

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

  minlength:

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

  rangelength:

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

  range:

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

  max:

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

  min:

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

}）;  

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

Js代码 

四、使用方式

1.将校验规则写到控件中

Js代码 

$（）.ready（function（） {  

 $（"#signupForm"）.validate（）;  

}）;  

        Firstname  

  E-Mail  

  Password  

true,minlength:

5}" />  

  确认密码  

true,minlength:

5,equalTo:

'#password'}" />  

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

jquery.metadata.js

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

Js代码  

class="{required:

true,minlength:

5,messages:

{required:

'请输入内容'}}"  

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

Js代码  

class="{required:

true,minlength:

5,equalTo:

'#password'}"  

另外一个方式，使用关键字：

meta（为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项）

Tellthevalidationplugintolookinsideavalidate-propertyinmetadataforvalidationrules.

例如：

Js代码  

meta:

 "validate"  

{required:

true,minlength:

5}}" />  

 再有一种方式：

Js代码  

$.metadata.setType（"attr", "validate"）;  

这样可以使用validate="{required:

true}"的方式，或者class="required"，但class="{required:

true,minlength:

5}"将不起作用 

2.将校验规则写到代码中

Html代码  

$（）.ready（function（） {  

 $（"#signupForm"）.validate（{  

        rules:

 {  

   firstname:

 "required",  

   email:

 {  

    required:

 true,  

    email:

 true  

   },  

   password:

 {  

    required:

 true,  

    minlength:

 5  

   },  

   confirm_password:

 {  

    required:

 true,  

    minlength:

 5,  

    equalTo:

 "#password"  

   }  

  },  

        messages:

 {  

   firstname:

 "请输入姓名",  

   email:

 {  

    required:

 "请输入Email地址",  

    email:

 "请输入正确的email地址"  

   },  

   password:

 {  

    required:

 "请输入密码",  

    minlength:

 jQuery.format（"密码不能小于{0}个字符"）  

   },  

   confirm_password:

 {  

    required:

 "请输入确认密码",  

    minlength:

 "确认密码不能小于5个字符",  

    equalTo:

 "两次输入密码不一致不一致"  

   }  

  }  

    }）;  

}）;  

//messages处，如果某个控件没有message，将调用默认的信息  

        Firstname  

  E-Mail  

  Password  

  确认密码  

required:

true必须有值

required:

"#aa:

checked"表达式的值为真，则需要验证

required:

function（）{}返回为真，表时需要验证

后边两种常用于，表单中需要同时填或不填的元素

五、常用方法及注意问题

1.用其他方式替代默认的SUBMIT

Js代码  

$（）.ready（function（） {  

 $（"#signupForm"）.validate（{  

        submitHandler:

function（form）{  

            alert（"submitted"）;     

            form.submit（）;  

        }      

    }）;  

}）;  

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

Js代码  

$.validator.setDefaults（{  

 submitHandler:

 function（form） { alert（"submitted!

"）;form.submit（）; }  

}）;  

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

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

Js代码  

$（）.ready（function（） {  

 $（"#signupForm"）.validate（{  

        debug:

true  

    }）;  

}）;  

如果一个页面中有多个表单，用

Js代码  

$.validator.setDefaults（{  

   debug:

 true  

}）  

3.ignore：

忽略某些元素不验证

Js代码  

ignore:

 ".ignore"  

4.errorPlacement：

Callback Default:

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

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

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

errorPlacement:

function（error,element）{   

   error.appendTo（element.parent（））;   

}

//示例：

Html代码 

    First Name  

 5px;">  

        14/02/07  

 5px;">  

        02/14/07  

            I have read and accept the Terms of Use.