ASP.NET MVC异步验证是如何工作的03,jquery.validate.unobtrusive.js是如何工作的

在上一篇"ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建"中了解了ASP.NET异步验证是如何创建表单元素的，本篇体验jquery.validate.unobtrusive.js异步验证的全过程。

在jquery.validate.unobtrusive.js文件的尾部看到了如下的一个调用：

    $(function () {

        $jQval.unobtrusive.parse(document);

    });

可见，通过把当前页的document对象传给$jQval.unobtrusive.parse方法，使该页的表单元素能被异步验证。parse方法的主要作用是对所有的表单进行异步验证。

{

parse: function (selector) {


$(selector).find(":input[data-val=true]").each(function () {

  $jQval.unobtrusive.parseElement(this, true);

});


var $forms = $(selector)

    .parents("form")

    .andSelf()

      .add($(selector).find("form"))

      .filter("form");


$forms.each(function () {

  var info = validationInfo(this);

  if (info) {

    info.attachValidation();

  }

});

}

}

以上，首先遍历data-val=true的input元素，调用$jQval.unobtrusive.parseElement方法，把存在于html元素中的、有关异步验证的信息抓取出来封装成jquery.validate.unobtrusive.js能识别的元数据。$jQval.unobtrusive.parseElement方法的第一个参数表示被验证的表单元素。第二个参数为true时，表示跳过对表单元素的验证，如果只验证一个元素就设置成true,如果验证多个元素就设置成false，默认为false。

在validationInfo这个对象中，包含了异步验证所需要的一切信息，当调用attachValidation方法的时候，就会把封装在validationInfo对象中的所有验证规则传给validate方法。

有关validationInfo的细节：

data_validation = "unobtrusiveValidation";


function validationInfo(form) {

  var $form = $(form),

       result = $form.data(data_validation),

       onResetProxy = $.proxy(onReset, form);


  if (!result) {

    result = {

      options: {  // options structure passed to jQuery Validate's validate() method

        errorClass: "input-validation-error",

        errorElement: "span",

        errorPlacement: $.proxy(onError, form),

        invalidHandler: $.proxy(onErrors, form),

        messages: {},

        rules: {},

        success: $.proxy(onSuccess, form)

      },

      attachValidation: function () {

        $form

          .unbind("reset." + data_validation, onResetProxy)

          .bind("reset." + data_validation, onResetProxy)

          .validate(this.options);

        },

      validate: function () {  // a validation function that is called by unobtrusive Ajax

        $form.validate();

        return $form.valid();

      }

    };

    $form.data(data_validation, result);

  }

  return result;

}

以上，在validationInfo的构造函数中，通过$form.data方法，可以获取或设置unobtrusiveValidation的值。在unobtrusiveValidation这个对象中，包含了异步验证所需要的信息：

1、名为options的json对象，包含了验证规则、错误信息等。
2、attachValidation方法用来给form绑定自定义事件，每次调用或解除reset.unobtrusiveValidation方法都会调用onReset方法。

function onReset(event) {  // 'this' is the form element

  var $form = $(this);


  $form.data("validator").resetForm();

  $form.find(".control-group").removeClass("error");

  $form.find(".validation-summary-errors")

    .addClass("validation-summary-valid")

    .removeClass("validation-summary-errors");

  $form.find(".field-validation-error")

    .addClass("field-validation-valid")

    .removeClass("field-validation-error")

    .removeData("unobtrusiveContainer")

      .find(">*")  // If we were using valmsg-replace, get the underlying error

      .removeData("unobtrusiveContainer");

}

3、validate表示可以自定义验证事件。

而在把validationInfo对象中的所有验证规则传给validate方法的时候，真正起作用的是$.validator.unobtrusive.adapters，这样html中以data-*开头的才能被validate方法读懂。如果需要自定义异步验证规则，需要通过jQuery.validator.unobtrusive.adapters.add(adapterName, [params], function(element, form, message, params, rules,messages){})方法来实现。

其中，adapterName与data-val-ruleName中的ruleName匹配。通过adapter可以扩展如下：

jQuery.validator.unobtrusive.adapters.addBool(adapterName, [ruleName]);

jQuery.validator.unobtrusive.adapters.addSingleVal(adapterName, attribute, [ruleName]);

jQuery.validator.unobtrusive.adapters.addMinMax(adapterName, minRuleName, maxRuleName, minMaxRuleName, [minAttribute, [maxAttribute]]);