jQuery Validation - 1.12.0 深度解析1

jQuery Validation是一个非常优秀的前端验证插件，默认支持多种常用的验证规则，如非空，范围，最大(小)值等等，设定规则的方式也是灵活多样。下面通过分析1.12.0的源代码进行深度解析。

1. 设定验证规则的方式

jQuery Validation支持多种设定验证规则的方式

1) classRules

通过在元素的class 上设定验证规则

      <tr>        <td class="label"><label for="password1">Password:</label></td>        <td class="field">        <input id="password1" class="required password" maxlength="40" name="password1" size="20" type="password" tabindex="12" value="" />        </td>      </tr>

2) attributeRules

直接在元素上使用验证规则的名称

<p><label for="phone">Phone</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"></p>

3) dataRules

使用html5 data-*自定义属性。关于html5自定义属性的小知识如下：

  1. 通过代码读取或者设置自定义属性的时候需要去掉前缀data-*。 比如自定义属性是data-location-code, 则js设值代码为:

element.dataset.locationCode = 'BJ';

   但如果在CSS中使用选择器，需要全名,如:  

  <style type="text/css"> [data-location-code] {color: red;} </style>

  2. 如果属性名称中除了data-外，还包含连字符(-)，则需要转成驼峰命名方式。见上面例子。

言归正传，jQuery Validation的设置方式如下：

  <label for="cemail">E-Mail *</label>  <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address" />

4) staticRules

初始化Validator的时候，通过参数设定的规则

// validate signup form on keyup and submit$("#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: "Please enter your firstname",lastname: "Please enter your lastname",username: {required: "Please enter a username",minlength: "Your username must consist of at least 2 characters"},password: {required: "Please provide a password",minlength: "Your password must be at least 5 characters long"},confirm_password: {required: "Please provide a password",minlength: "Your password must be at least 5 characters long",equalTo: "Please enter the same password as above"},email: "Please enter a valid email address",agree: "Please accept our policy"}});

注意这里的firstname, lastname都是指定form里面元素的名称。

总体而言，classRules和attributeRules，前者通过污染class来设置规则，后者使用非html标准属性来设置规则， 都不是我推荐的方式。

建议大家在实际开发中使用staticRules和dataRules。

可以多种方法一起使用,最后规则会被合并，优先级是 4) > 3) > 2) > 1).

注：原来的版本如1.9 曾支持使用$.metadata插件提供的功能设置规则，新版本已经没有了。

2. 关于Validate() 函数

一个页面可以包含多个form, 加载完毕后，即可针对每个form调用validate() 进行初始化。如下面代码：

    <script type="text/javascript">        $(document).ready(function () {            $("#commentForm").validate();            $("#commentForm2").validate({            messages: {            email: {            required: 'Enter this!'            }            }            });        });    </script>

这里的validate()方法并不是做实际的验证工作，只是返回一个针对当前form的验证器对象(validator)。里面主要做了哪些事情呢？

1) validate(options) 函数首先检查是否创建过 validator, 如果创建过则直接返回，否则继续新对象。

// check if a validator for this form was already createdvar validator = $.data( this[0], "validator" );if ( validator ) {return validator;}

validate传入的options， 会被合并到$.validator的defaults参数列表里面。因此这里可以针对form做不同的参数设定。

2) 初始化validator

最重要的一点是在form上统一监控特定类型元素的特定事件，以便激发验证。这是如何做到的呢？见代码：

function delegate(event) {var validator = $.data(this[0].form, "validator"),eventType = "on" + event.type.replace(/^validate/, ""),settings = validator.settings;if ( settings[eventType] && !this.is( settings.ignore ) ) {settings[eventType].call(validator, this[0], event);}}$(this.currentForm).validateDelegate(":text, [type='password'], [type='file'], select, textarea, " +"[type='number'], [type='search'] ,[type='tel'], [type='url'], " +"[type='email'], [type='datetime'], [type='date'], [type='month'], " +"[type='week'], [type='time'], [type='datetime-local'], " +"[type='range'], [type='color'] ","focusin focusout keyup", delegate).validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);if ( this.settings.invalidHandler ) {$(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);}

3) 对 submit行为的处理

如果设定validator.settings.onsubmit = true,  则监控form里面type=submit元素的click事件，对onSubmit, submit进行函数绑定。

jquery validator 可以通过设定在submit元素 上设定class="cancel",  来避免激发验证。

至此，验证的初始化完成。

下一篇我们来分析验证是怎样进行的。