ASP.NET MVC的客户端验证：jQuery验证在Model验证中的实现

在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后，我们来介绍ASP.NET MVC是如何利用它实现客户端验证的。服务端验证最终实现在相应的ModelValidator中，而最终的验证规则定义在相应的ValidationAttribute中；而客户端验证规则通过HtmlHelper<TModel>相应的扩展方法（比如TextBoxFor、EditorFor和EdidtorForModel等）出现在生成的被验证HTML元素中。毫无疑问，服务端验证和客户端验证必须采用相同的验证规则，那么通过应用ValidationAttribute特性定义的验证规则也同样体现在基于客户端验证规则的HTML上。[本文已经同步到《How ASP.NET MVC Works?》中]

一、ValidationAttribute与HTML

ASP.NET MVC默然采用基于ValidationAttribute特性的声明式Model验证，服务端验证最终实现在两个重写的IsValid方法中。对于客户端验证，ASP.NET MVC对jQuery的验证插件进行了扩展，实现了另一种不同的内联方式是我们 可以将验证规则定义在被验证输入元素的属性中。为了让客户端和服务端采用相同的验证规则，应用在Model类型某个属性上的ValidationAttribute特性最终会体现在目标属性对应的HTML元素上。

public class Contact
{
    [DisplayName("姓名")]
    [Required(ErrorMessage ="请输入{0}!")]
    [StringLength(8, ErrorMessage="作为{0}字符串长度不能超过{1}!")]
    public string Name { get; set; }

    [DisplayName("电子邮箱地址")]
    [RegularExpression(@"^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$",ErrorMessage="请输入正确的电子邮箱地址！")]
    public string EmailAddress { get; set; }
}

假设我们具有如上一个数据类型Contact，RequiredAttribute和StringLengthAttribute特性应用到表示姓名的Name属性上用于确保用于必须输入一个不超过128个字符的字符串，而表示Email地址的EmailAddress属性应用了一个RegularExpressionAttribute用于确保用于输入一个合法的Email地址。在一个以此Contact为Model类型的View中，如果我们调用HtmlHelper<TModel>的扩展方法EditorForModel，最终会生成如下一段HTML。

<div class="editor-label">
  <label for="Name">姓名</label>
</div>

<div class="editor-field">
  <input class="text-box single-line"
         data-val            ="true"
         data-val-length     ="作为姓名字符串长度不能超过8!"
         data-val-length-max ="8"
         data-val-required   ="请输入姓名!"
         id="Name" name="Name" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
  <label for="EmailAddress">电子邮箱地址</label>
</div>

<div class="editor-field">
  <input class="text-box single-line"
         data-val               ="true"
         data-val-regex         ="请输入正确的电子邮箱地址！"
         data-val-regex-pattern ="^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$"
         id="EmailAddress" name ="EmailAddress" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
</div>

通过上面的这段HTML我们可以看到，对应着Model对象两个属性的<input>元素具有一个“data-val”属性和一系列以“data-val-”为前缀的属性，前者表示是否需要对用户输入的值进行验证，后者则代表相应的验证规则。具体来说，去除“data-val-”前缀后的属性名称对应着采用jQuery验证时对应的验证规则名称。

一般来说，一个ValidationAttribute对应着一种验证类型和一系列可选的验证参数。比如RequiredAttribute、StringLengthAttribute和RegularExpressionAttribute对应的验证类型分别是“required”、“length”和“regex”，而StringLengthAttribute和RegularExpressionAttribute各自具有一个验证参数length-max（表示允许的字符串最大长度）和regex-pattern（正则表达式）。验证错误消息一般作为验证类型属性的值，而验证参数对应的属性值自然就是相应的属性值。

对于上面生成的HTML还有一点值得一提的是：对应着被验证属性的<input>元素会紧跟一个<span>元素用于显示验证失败后的错误消息。该<span>元素的CSS类型为“field-validation-valid”，我们可以通过它来定制错误消息的显示样式。

二、客户端验证规则的生成

ASP.NET MVC在利用jQuery进行客户端验证的时候，虽然验证规则并没有采用其原生的方式通过被验证元素的class属性来提供，但是却可以通过“data-val-{rulename}”的命名模式提取相应的验证规则属性值，并最终得到一样验证规则，ASP.NET MVC只需要对两种作简单的适配即可。

我们现在关心的是当我们调用HtmlHelper<TModel>相应的扩展方法将Model对象的某个属性以表单输入元素的形式呈现的时候是如何生成这些以“data-val-”为前缀的验证属性的呢？在这里我们需要涉及到一个重要的类型ModelClientValidationRule，顾名思义，ModelClientValidationRule用于描述客户端验证规则。如下面的代码所示，ModelClientValidationRule具有三个属性，字符串属性ErrorMessage和ValidationType表示验证错误消息和验证的类型，类型为IDictionary<string, object>的只读属性ValidationParameters表示辅助客户端验证的参数，其中Key和Value分别表示验证参数名和参数值。

public class ModelClientValidationRule
{
    public string ErrorMessage { get; set; }
    public string ValidationType { get; set; }
    public IDictionary<string, object> ValidationParameters { get; }
}

public abstract class ModelValidator
{
    //其他成员
    public virtual IEnumerable<ModelClientValidationRule> GetClientValidationRules();
    public abstract IEnumerable<ModelValidationResult> Validate(object container);
}

通过前面的介绍我们知道抽象类ModelValidator中具有一个虚方法GetClientValidationRules用于返回一个ModelClientValidationRule对象的列表。对于所有支持客户端验证的ModelValidator来说，它必须重写该方法以通过重写Validate方法实现的服务端验证逻辑相一致的客户端验证规则。

以用于进行范围验证的RangeAttribute特性对应的RangeAttributeAdapter为例，通过如下的代码片断我们知道它重写了GetClientValidationRules并返回一个ModelClientValidationRangeRule对象元素的列表，该ModelClientValidationRule对象的验证类型为“range”，采用RangeAttributeAdapter的ErrorMessage属性作为自身的错误消息，作为验证范围的上、下限的值成为了该ModelClientValidationRule的两个验证参数，参数分别为“min”和“max”。

public class RangeAttributeAdapter : DataAnnotationsModelValidator<RangeAttribute>
{
    //其他成员
    public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
    {
        string errorMessage = base.ErrorMessage;
        return new ModelClientValidationRangeRule[] { new ModelClientValidationRangeRule(errorMessage, base.Attribute.Minimum, base.Attribute.Maximum) };
    }
}

public class ModelClientValidationRangeRule : ModelClientValidationRule
{
    public ModelClientValidationRangeRule(string errorMessage, object minValue, object maxValue)
    {
        base.ErrorMessage = errorMessage;
        base.ValidationType = "range";
        base.ValidationParameters["min"] = minValue;
        base.ValidationParameters["max"] = maxValue;
    }
}

客户端验证还在这里涉及到一个重要的接口IClientValidatable，它具有唯一的GetClientValidationRules方法返回一个以ModelClientValidationRule对象表示的客户端验证规则列表。

public interface IClientValidatable
{
    IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context);
}

对于所有支持客户端验证的ValidationAttrubute来说，都需要实现IClientValidatable接口并通过实现GetClientValidationRules方法提供对应的验证规则，而生成的验证规则需要与通过重写的IsValid方法实现的服务端验证逻辑一致。DataAnnotationsModelValidator重写了GetClientValidationRules方法，如果对应的ValidationAttribute实现了IClientValidatable接口，它（ValidationAttribute）的GetClientValidationRules方法被调用返回的ModelClientValidationRule列表作为该方法的返回值。

当我们在某个View中调用HtmlHelper<TModel>的扩展方法将Model对象的某个属性以表单输入元素呈现出来的时候，会采用我们前面介绍的ModelValidator的提供机制根据目标属性对应的Model元数据创建相应的ModelValidator，然后调用GetClientValidationRules方法得到一组表示客户端验证规则的ModelClientValidationRule列表。如果该列表不为空，它们将作为验证属性附加到目标属性对应的<input>元素中。