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

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

一、ValidationAttribute与HTML

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

 1: public class Contact
 2: {
 3: [DisplayName（"姓名"）]
 4: [Required（ErrorMessage ="请输入{0}！"）]
 5: [StringLength（8, ErrorMessage="作为{0}字符串长度不能超过{1}！"）]
 6: public string Name { get; set; }
 7:
 8: [DisplayName（"电子邮箱地址"）]
 9: [RegularExpression（@"^w+@[a-zA-Z_]+？.[a-zA-Z]{2,3}$",ErrorMessage="请输入正确的电子邮箱地址！"）]
10: public string EmailAddress { get; set; }
11: }

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

 1: <div class="editor-label">
 2: <label for="Name">姓名</label>
 3: </div>
 4:
 5: <div class="editor-field">
 6: <input class="text-box single-line"
 7:data-val="true"
 8:data-val-length ="作为姓名字符串长度不能超过8！"
 9:data-val-length-max ="8"
10:data-val-required ="请输入姓名！"
11:id="Name" name="Name" type="text" value="" />
12: <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
13: </div>
14:
15: <div class="editor-label">
16: <label for="EmailAddress">电子邮箱地址</label>
17: </div>
18:
19: <div class="editor-field">
20: <input class="text-box single-line"
21:data-val ="true"
22:data-val-regex ="请输入正确的电子邮箱地址！"
23:data-val-regex-pattern ="^w+@[a-zA-Z_]+？.[a-zA-Z]{2,3}$"
24:id="EmailAddress" name ="EmailAddress" type="text" value="" />
25: <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
26: </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”，我们可以通过它来定制错误消息的显示样式。