jQuery验证插件 Validate详解

YanYMLu 2016-08-11

展开全文

最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点：

1.内置验证规则：拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
2.自定义验证规则：可以很方便地自定义验证规则
3.简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认的提示信息的功能
4.实时验证：可能通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证

使用方法：
1.引入jQuery库和Validation插件

因为默认的提示是英文的，可以改写成

jQuery.extend(jQuery.validator.messages, {
        required: '必选字段',
        remote: '请修正该字段',
        email: '请输入正确格式的电子邮件',
        url: '请输入合法的网址',
        date: '请输入合法的日期',
        dateISO: '请输入合法的日期 (ISO).',
        number: '请输入合法的数字',
        digits: '只能输入整数',
        creditcard: '请输入合法的信用卡号',
        equalTo: '请再次输入相同的值',
        accept: '请输入拥有合法后缀名的字符串',
        maxlength: jQuery.format('请输入一个长度最多是 {0} 的字符串'),
        minlength: jQuery.format('请输入一个长度最少是 {0} 的字符串'),
        rangelength: jQuery.format('请输入一个长度介于 {0} 和 {1} 之间的字符串'),
        range: jQuery.format('请输入一个介于 {0} 和 {1} 之间的值'),
        max: jQuery.format('请输入一个最大为 {0} 的值'),
        min: jQuery.format('请输入一个最小为 {0} 的值')
});

建议新建一个js,放到validate.js 下面.

关于提示的美化

errorElement:'em'

　　创建一个标签，可以自定义

success:function(label){
label.text(' ').addClass('success')
}

这里的参数label是指向创建的标签，这里也就是”em“ 然后情况自己的内容，在加上自己的class就可以了

完整的js

$('#commentForm').validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:'url',
        comment:'required',
      },
      errorElement:'em',
      success:function(label){
        label.text(' ').addClass('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;
}

.success放到.error下面。。。唔唔。。具体的情况。。只可体会不可言会。。唔。。

在做项目的过程中千变万化，有时候要满足不同的需求，validate也可以单独的修改验证的信息。。

例如：

messages:{
        username:{
          required:'主人,我要填的满满的',
          minlength:'哎唷,长度不够耶'
        }
   }

完整的js

$('#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:'哎唷,长度不够耶'
        }
      },
      errorElement:'em',
      success:function(label){
        label.text(' ').addClass('success')
      }
    });

这里就可以啦。

关于自定义验证规则

增加一段HTML代码

     验证码
     =7+9

自定一个规则

$.validator.addMethod('formula',function(value,element,param){
return value==eval(param)
},'请正确输入验证信息');

formula是需要验证方法的名字好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式好比如：7+9
在试用了eval方法让字符串相加

完整的js

$.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:'哎唷,长度不够耶'
        }
      },
      errorElement:'em',
      success:function(label){
        label.text(' ').addClass('success')
      }
    });