jQuery Validate多实例讲解

推荐格式

  $().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
      });
  });

更改错误信息显示的位置

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

  $.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

##### Validator

验证的触发方式修改

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

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

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