jQuery Validate多实例讲解

规则	描述
required:true	必须输入的字段。
remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
email:true	必须输入正确格式的电子邮件。
url:true	必须输入正确格式的网址。
date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
number:true	必须输入合法的数字（负数，小数）。
digits:true	必须输入整数。
creditcard:true	必须输入合法的信用卡号。
equalTo:"#field"	输入值必须和 #field 相同。
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
range:[5,10]	输入值必须介于 5 和 10 之间。
max:5	输入值不能大于 5。
min:10	输入值不能小于 10。

推荐格式

  $().ready(function() {
  // 在键盘按下并释放及提交后验证提交表单
    $("#signupForm").validate({
      rules: {
        firstname: "required",
        lastname: "required",
        username: {
          required: true,
          minlength: 2
        },
        password: {
          required: true,
          minlength: 5
        },
        confirm_password: {
          required: true,
          minlength: 5,
          equalTo: "#password"
        },
        email: {
          required: true,
          email: true
        },
        topic: {
          required: "#newsletter:checked",
          minlength: 2
        },
        agree: "required"
      },
      messages: {
        firstname: "请输入您的名字",
        lastname: "请输入您的姓氏",
        username: {
          required: "请输入用户名",
          minlength: "用户名必需由两个字母组成"
        },
        password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母"
        },
        confirm_password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母",
          equalTo: "两次密码输入不一致"
        },
        email: "请输入一个正确的邮箱",
        agree: "请接受我们的声明",
        topic: "请选择两个主题"
      }
  });

用其他方式替代默认的 SUBMIT

  $().ready(function() {
   $("#signupForm").validate({
          submitHandler:function(form){
              alert("提交事件!");   
              form.submit();
          }    
      });
  });

  $("#btnSubmit").click(function(){
      if ($("#frmAddVisit").valid() == true) {
          submitInfo();
      }
  });

   $(".selector").validate({     
   submitHandler: function(form) 
     {      
        $(form).ajaxSubmit();     
     }  
   }) 

debug，只验证不提交表单

  $().ready(function() {
   $("#signupForm").validate({
          debug:true
      });
  });

更改错误信息显示的位置

默认情况是：把错误信息放在验证的元素后面

参数	类型	描述	默认值
errorClass	String	指定错误提示的 css 类名，可以自定义错误提示的样式。	"error"
errorElement	String	用什么标签标记错误，默认是 label，可以改成 em。	"label"
errorContainer	Selector	显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。
errorLabelContainer	Selector	把错误信息统一放在一个容器里面。
wrapper	String	用什么标签再把上边的 errorELement 包起来。

  $.validator.setDefaults({
      submitHandler: function() {
        alert("提交事件!");
      }
  });

  $().ready(function() {
      // 提交时验证表单
      var validator = $("#form1").validate({
          errorPlacement: function(error, element) {
              // Append error within linked label
              $( element )
                  .closest( "form" )
                      .find( "label[for='" + element.attr( "id" ) + "']" )
                          .append( error );
          },
          errorElement: "span",
          messages: {
              user: {
                  required: " (必需字段)",
                  minlength: " (不能少于 3 个字母)"
              },
              password: {
                  required: " (必需字段)",
                  minlength: " (字母不能少于 5 个且不能大于 12 个)",
                  maxlength: " (字母不能少于 5 个且不能大于 12 个)"
              }
          }
      });

      $(".cancel").click(function() {
          validator.resetForm();
      });
  });

异步验证

  remote:{
        url: site_path + '/open/check?d=' + Math.random(),     //后台处理程序
        type: "post",               //数据发送方式
        dataType: "json",           //接受数据格式   
        data: {                     //要传递的数据
        companyname: function() {
               return $("#companyname").val();
              }
          }
  }

      @ResponseBody
      @RequestMapping(value = "/open/check", method = RequestMethod.POST)
      public boolean check(HttpServletRequest httpRequest) {
          return false;
      }

服务端就直接返回boolean值，如果不通过则返回false，反之返回true

添加自定义校验

  addMethod：name, method, message

参数 name 是添加的方法的名字。
参数 method 是一个函数，接收三个参数 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是参数。

  // 中文字两个字节
  jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
      var length = value.length;
      for(var i = 0; i < value.length; i++){
          if(value.charCodeAt(i) > 127){
              length++;
          }
      }
    return this.optional(element) || ( length >= param[0] && length <= param[1] );   
  }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

  // 邮政编码验证   
  jQuery.validator.addMethod("isZipCode", function(value, element) {   
      var tel = /^[0-9]{6}$/;
      return this.optional(element) || (tel.test(value));
  }, "请正确填写您的邮政编码");

要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

  $.validator.addMethod("af",function(value,element,params){  
      if(value.length>1){
          return false;
      }
      if(value>=params[0] && value<=params[1]){
          return true;
      }else{
          return false;
      }
  },"必须是一个字母,且a-f");

  username:{
     af:["a","f"]
  }

addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。
addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。
如果只有一个参数，直接写，比如 af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在 [] 里，用逗号分开。

jQuery.validate 中文 API

名称	返回类型	描述
validate(options)	Validator	验证所选的 FORM。
valid()	Boolean	检查是否验证通过。
rules()	Options	返回元素的验证规则。
rules("add",rules)	Options	增加验证规则。
rules("remove",rules)	Options	删除验证规则。
removeAttrs(attributes)	Options	删除特殊属性并且返回它们。

##### Validator

名称	返回类型	描述
form()	Boolean	验证 form 返回成功还是失败。
element(element)	Boolean	验证单个元素是成功还是失败。
resetForm()	undefined	把前面验证的 FORM 恢复到验证前原来的状态。
showErrors(errors)	undefined	显示特定的错误信息。
Validator 函数
setDefaults(defaults)	undefined	改变默认的设置。
addMethod(name,method,message)	undefined	添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。
addClassRules(name,rules)	undefined	增加组合验证类型，在一个类里面用多种验证方法时比较有用。
addClassRules(rules)	undefined	增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。

验证的触发方式修改

onsubmit、onfocusout、onkeyup、onclick、focusInvalid默认的时候都是true，focusCleanup默认为false

  $(".selector").validate({  
      onsubmit:false
  })

更多内容可以关注微信公众号，或者访问AppZone网站