Asp.net MVC源码分析--Model Validation(Client端)实现(2)

上一篇我们介绍了如果输出Client Validation 信息到浏览器，下面我们来分析一个MVC是如果实现JavaScript验证的。

一.TextFor 输出的Html文本

先来看一下标记了[Required] attribute的属性通过TextFor输出的Html代码：

<input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" class="valid">

data-val:是否需要客户端验证

data-val-required:验证类型和错误消息

二.jquery.validate.unobtrusive.js的实现

1.unobtrusive　自定义验证规则

var $jQval = $.validator,
adapters,
data_validation = "unobtrusiveValidation";

我们看到$jQval对象其实就是$.validator对象。

$jQval.unobtrusive = {
adapters: [],

adapters = $jQval.unobtrusive.adapters;
adapters.add = function (adapterName, params, fn) {
if (!fn) {  // Called with no params, just a function
fn = params;
params = [];
}
this.push({ name: adapterName, params: params, adapt: fn });
return this;
};

adapters.add("required", function (options) {
if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
setValidationValues(options, "required", true);
}
});
}

上面代码第10行，我们看到unobtrusive把所有与MVC相关的验证规则都放到了$jQval.unobtrusive.adapters(Array)对象中.　那么这些验证规则如果被Jquery调用的呢？我们接着来看.

2.用Adapter模式与Jquery集成

下面我们看一下jquery.validate.unobtrusive.js的实现,当初始化时调用了$jQval.unobtrusive.parse方法请注意上面第42行，unobtrusive只对data-val设置为true的input控件进行验证 。

$(function () {
$jQval.unobtrusive.parse(document);
});

function validationInfo(form) {
var $form = $(form),
result = $form.data(data_validation);

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.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;
}

parse: function (selector) {
$(selector).find(":input[data-val=true]").each(function () {
$jQval.unobtrusive.parseElement(this, true);
});

$("form").each(function () {
var info = validationInfo(this);
if (info) {
info.attachValidation();
}
});
}

上面的代码第21行，就是调用了jQuery的valildate方法对form 表单进行验证,那么this.options 是怎么得到的呢？

是在$jQval.unobtrusive.parseElement方法里完成的。

parseElement: function (element, skipAttach) {

var $element = $(element),
form = $element.parents("form")[0],
valInfo, rules, messages;

if (!form) {  // Cannot do client-side validation without a form
return;
}

valInfo = validationInfo(form);
valInfo.options.rules[element.name] = rules = {};
valInfo.options.messages[element.name] = messages = {};

$.each(this.adapters, function () {
var prefix = "data-val-" + this.name,
message = $element.attr(prefix),
paramValues = {};

if (message !== undefined) {  // Compare against undefined, because an empty message is legal (and falsy)
prefix += "-";

$.each(this.params, function () {
paramValues[this] = $element.attr(prefix + this);
});

this.adapt({
element: element,
form: form,
message: message,
params: paramValues,
rules: rules,
messages: messages
});
}
});

jQuery.extend(rules, { "__dummy__": true });

if (!skipAttach) {
valInfo.attachValidation();
}
},

小结:

$jQval.unobtrusive 利用adapter模式,对jQuery的validate方法包装

unobtrusive只对data-val设置为true的input控件进行验证 。

转载请注明出处:http://www.cnblogs.com/RobbinHan/archive/2011/12/19/2293391.html

本文作者: 十一月的雨 http://www.cnblogs.com/RobbinHan