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

时间：2023-12-17 18:07:38

在上一篇"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]]);


相关文章