jQuery validate 用法

阅读更多

validate.js下载地址： http://plugins.jquery.com/project/validate
metadata.js下载地址： http://plugins.jquery.com/project/metadata

small tip:

引用

jquery必须在jquery.validate.js之前被引入，否则会报错

现在公司的常规写法 是 引入Jquery.validate.js后，在utils.js中统一写好function 并定义统一的validateForm 然后在页面直接使用 好处是可以统一代码 并且减少在单独页面的代码量。

jQuery validate 使用方法如下：

1.引入jQuery库和Validation插件

2.确定哪个表单需要被验证

3.针对不同的字段，进行验证规则编码，设置字段相应的属性

class="required"   必须填写  
class="required email"        必须填写且内容符合Email格式验证  
class="url"             符合URL格式验证  
minlength="2"      最小长度为2  

可验证的规则有19种：

required:      必选字段  
remote:        "请修正该字段",  
email:         电子邮件验证  
url:           网址验证  
date:          日期验证  
dateISO:       日期 (ISO)验证  
dateDE:  
number:        数字验证  
numberDE:  
digits:        只能输入整数  
creditcard:    信用卡号验证  
equalTo:       ”请再次输入相同的值“验证  
accept:        拥有合法后缀名的字符串验证  
maxlength/minlength:    最大/最小长度验证  
rangelength:     字符串长度范围验证  
range:           数字范围验证  
max/min:         最大值/最小值验证  

注意 ：

引用

将所有的与验证相关的信息写到class属性中方便管理 一般我们会引用一个新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

1 引入新包

2.改变调用的验证方法

3.将验证规则全部编写到class属性中

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}"  
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"       

也可以通过name属性来关联字段和验证规则的验证写法（验证行为和HTML结构完全脱钩）

$("#commentForm").validate({  
   rules: {  
      username: {  
         required: true,  
         minlength: 2  
      },  
      email: {  
         required: true,  
         email: true  
      },  
      url:"url",  
      comment: "required"  
   },  
   messages: {  
      username: {  
         required: '请输入姓名',  
         minlength: '请至少输入两个字符'  
      },  
      email: {  
         required: '请输入电子邮件',  
         email: '请检查电子邮件的格式'  
      },  
      url: '请检查网址的格式',  
      comment: '请输入您的评论'  
   }  
});  

国际化
Validation插件的验证信息默认语言是英文，如果要改成中文，只需要引入Validation提供的中文验证信息即可，引入代码如下：

自定义验证信息并美化

errorElement: "em",               //可以用其他标签，记住把样式也对应修改  
success: function(label) {    //label指向上面那个错误提示信息标签em  
      label.text("")                       //清空错误提示消息  
              .addClass("success");    //加上自定义的success类  
     }  

在CSS中添加样式与之关联 

em.error {  
      background:url("images/unchecked.gif") no-repeat 0px 0px;  
      padding-left: 16px;  
}  
em.success {  
      background:url("images/checked.gif") no-repeat 0px 0px;  
      padding-left: 16px;  
}  

自定义验证规则

//自定义一个验证方法  
$.validator.addMethod(  
    "formula", //验证方法名称  
    function(value, element, param) {//验证规则  
        return value == eval(param);  
    },   
    '请正确输入数学公式计算后的结果'//验证提示信息  
);  
  
$("#commentForm").validate({  
   rules: {  
      username: {  
         required: true,  
         minlength: 2  
      },  
      email: {  
         required: true,  
         email: true  
      },  
      url:"url",  
      comment: "required",  
      valcode: {  
         formula: "7+9"  
      }  
   },  
   messages: {  
      username: {  
         required: '请输入姓名',  
         minlength: '请至少输入两个字符'  
      },  
      email: {  
         required: '请输入电子邮件',  
         email: '请检查电子邮件的格式'  
      },  
      url: '请检查网址的格式',  
      comment: '请输入您的评论',  
      valcode: '验证码错误'  
   }  
});