jQuery Validation Plugin客户端表单证验插件

jQuery Validation Plugin客户端表单验证插件

官方文档：http://jqueryvalidation.org/documentation/

官方demo：http://jquery.bassistance.de/validate/demo/

下载：http://jquery.bassistance.de/validate/jquery-validation-1.11.1.zip

jQuery Validation Plugin是一款客户端表单校验的插件，功能强大，使用简单。

先看一个简单的demo，例如一个标准的表单

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required/>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required/>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url"/>
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit"/>
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();//仅一行js
</script>

上面表单的校验效果是什么呢？

1、当点击submit按钮之后，第一个校验失败的控件会获得焦点；如果按下submit按钮之前，最后一个获取焦点的控件，即不是第一个控件，同时也校验失败，那么此控件将在submit按钮之后获取焦点，而不是第一个控件获取焦点；

2、插件是懒加载的，在没有点击过submit的情况下，用户可以用tab建任意切换输入焦点，而不会获得任何校验失败的提示信息；

3、当一个控件校验失败后，错误信息会提示出来，但是当这个控件的输入合法后，校验信息会马上消失，不需要等待下一次submit；

下面来看看validate( [options ] )方法的参数：

submitHandler (default: native form submit)

当表单校验通过后回调的方法，有一个form参数。一般情况都是在回调方法中用ajax方式提交表单，如下：

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

当然也可以用标准的submit，因为form是一个dom参数，此时的submit()方法，不会再次触发校验

$(".selector").validate({
  submitHandler: function(form) {
    // do other things for a valid form
    form.submit();
  }
});

invalidHandler参数
当表单校验失败后回调的方法，有2个参数，第一个是event，第二个是validator自身

例如，显示错误信息并提示有多少个错误项

$(".selector").validate({
  invalidHandler: function(event, validator) {
    // 'this' refers to the form
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? 'You missed 1 field. It has been highlighted'
        : 'You missed ' + errors + ' fields. They have been highlighted';
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

ignore (default: ":hidden")参数
设置哪些控件是不需要校验的
例如：过滤所以.ignore的class属性的控件

$("#myform").validate({
  ignore: ".ignore"
});

rules (default: rules are read from markup (classes, attributes, data))参数
描述具体的校验规则，从最上面的例子中可以看出，这个规则默认是从控件的属性中读取的，当然也可以自己设置。

设置方式是key/value键值对，其中key是控件的name，而value就是规则，此规则可以是字符串的值，也可以是某个json对象值

每个规则都可以有一个depends属性来设置依赖规则，例如一些条件必输项（当1选择，则2必输；当1未选择，则2非必输）

例如：

$(".selector").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

下面的例子，将contract设置成必输和email格式，但email格式的规则，必须依赖#contactform_email:checked

$(".selector").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email:checked")
        }
      }
    }
  }
});

messages (default: the default message for the method used)参数
设置错误信息，与规则1对1，每个错误信息可以是字符串，也可以是回调函数

如果是回调函数，则第一个参数是规则，第二个参数是输入控件本身，回调函数必须返回字符串

例如：

$(".selector").validate({
  rules: {
    name: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    name: {
      required: "We need your email address to contact you",
      minlength: jQuery.format("At least {0} characters required!")
    }
  }
});

groups参数

groups参数可以把多个错误信息绑定成一个组，再利用errorPlacement 方法来设置错误信息显示的具体位置

如下列所示，将fname和lname绑定成一个组，组id是username，其中fname和lname是2个控件的name，而username是自定义的组id

绑定后，fname和lname的错误信息就会显示在一个位置上，而且不会同时显示；具体效果描述起来比较麻烦，自己尝试一下就可以明白

$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
});

onsubmit (default: true)
设置是否在submit的时候做校验，如果设置成false，则不作任何校验

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

onfocusout参数
设置控件（除checkboxes/radio buttons）在失去焦点的时候，是否进行校验

$(".selector").validate({
  onfocusout: false
});

也可以设置一个回调函数，自己决定是否进行校验，回调函数有2个参数，event和element

onkeyup参数
设置控件在按键放开时，是否进行校验；同样接受boolean值，可以设置回调函数

onclick参数

设置checkboxes/radio buttons在按下时，是否进行校验；同样接受boolean值，可以设置回调函数

focusInvalid (default: true)参数
设置在submit后，是否自动把焦点设置到第一个控件或最后一个失去焦点的未校验通过控件

$(".selector").validate({
  focusInvalid: false
});

focusCleanup (default: false)参数
设置当控件获取焦点后，是否清除错误信息；注意，要避免与focusInvalid一起使用，不然感觉就像没错误提示一样

$(".selector").validate({
  focusCleanup: true
});

errorClass (default: "error")参数
使用这个class来创建错误信息label

$(".selector").validate({
  errorClass: "invalid"
});

validClass (default: "valid")参数
当控件校验通过时，设置此class

$(".selector").validate({
  validClass: "success"
});

errorElement (default: "label")参数
设置错误信息控件

$(".selector").validate({
  errorElement: "em"
});

wrapper (default: window)参数
设置错误信息label的分割，例如错误信息：<label for="firstname" class="error" style="display: inline;">Please enter your firstname</label>

当设置如下分割后：

$(".selector").validate({
  wrapper: "li"
});

错误信息变成：

<li style=""><label for="firstname" class="error" style="display: inline;">Please enter your firstname</label></li>
errorLabelContainer参数
将错误信息统一起来

$("#myform").validate({
  errorLabelContainer: "#messageBox ul",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

如上设置后，错误信息将全部显示在#messageBox ul中，以li分割

errorContainer参数
设置一个额外的错误信息容器，但是这个容器中不会加入错误信息，但是这个容器本身，会随着错误信息的显示而显示，当错误信息全部消失，即校验全部通过时，这个容器也会消失；可以配合errorLabelContainer一起使用

$("#myform").validate({
  errorContainer: "#messageBox1, #messageBox2",
  errorLabelContainer: "#messageBox1 ul",
  wrapper: "li", debug:true,
  submitHandler: function() { alert("Submitted!") }
});

showErrors参数
这应该是个高级的参数，设置具体显示错误信息的方式，先看例子

$(".selector").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});

从例子中可以看出，是validator对象本身调用此回调函数，如果不处理具体的错误显示方式，可以调用this.defaultShowErrors()

errorMap参数是一个对象，errorList是一个数组，记录的都是错误信息，从下图中来直观的了解其存储的具体值，是chrome的变量查看

errorPlacement (default: Places the error label after the invalid element)参数
这个前面遇到过，就是设置错误信息的显示位置，例如在一个table布局的form中，将错误信息显示到下一个td中

$("#myform").validate({
  errorPlacement: function(error, element) {
    error.appendTo( element.parent("td").next("td") );
  }
});

success参数

设置字符串时，表示校验通过的错误信息设置的class属性

$("#myform").validate({
  success: "valid",
  submitHandler: function() { alert("Submitted!") }
});

设置成回调函数，有2个参数，第一个label表示错误信息对象，第二个element表示对应的输入控件对象

如下面例子，在校验通过时，给错误信息label设置class并且将信息改成OK！

$("#myform").validate({
  success: function(label) {
    label.addClass("valid").text("Ok!")
  },
  submitHandler: function() { alert("Submitted!") }
});

highlight (default: Adds errorClass (see the option) to the element)参数
设置如何高亮显示校验失败的控件，回调函数有3个参数，element表示当前控件，errorClass和validClass就不用解释了

例如，将校验失败的控件消退再显示：

$(".selector").validate({
  highlight: function(element, errorClass) {
    $(element).fadeOut(function() {
      $(element).fadeIn();
    });
  }
});

或者设置errorClass，其实默认就是这么操作

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

unhighlight (default: Removes the errorClass)参数
同上的设置方式，只是在控件校验通过时，取消高亮

ignoreTitle (default: false)参数
是否取消从title属性中读取值，好像在Google Toolbar中会有一些问题，需要设置成true；默认是false，这个笔者也没具体研究过，有研究清楚的欢迎留言。

到此，插件的构造方法和参数就全部翻译完了，但是还有很多没有翻译，待下一篇博文吧！