在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的。服务端验证最终实现在相应的ModelValidator中,而最终的验证规则定义在相应的ValidationAttribute中;而客户端验证规则通过HtmlHelper
一、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
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对象两个属性的元素具有一个“data-val”属性和一系列以“data-val-”为前缀的属性,前者表示是否需要对用户输入的值进行验证,后者则代表相应的验证规则。具体来说,去除“data-val-”前缀后的属性名称对应着采用jQuery验证时对应的验证规则名称。
一般来说,一个ValidationAttribute对应着一种验证类型和一系列可选的验证参数。比如RequiredAttribute、StringLengthAttribute和RegularExpressionAttribute对应的验证类型分别是“required”、“length”和“regex”,而StringLengthAttribute和RegularExpressionAttribute各自具有一个验证参数length-max(表示允许的字符串最大长度)和regex-pattern(正则表达式)。验证错误消息一般作为验证类型属性的值,而验证参数对应的属性值自然就是相应的属性值。
对于上面生成的HTML还有一点值得一提的是:对应着被验证属性的元素会紧跟一个元素用于显示验证失败后的错误消息。该元素的CSS类型为“field-validation-valid”,我们可以通过它来定制错误消息的显示样式。
二、客户端验证规则的生成
ASP.NET MVC在利用jQuery进行客户端验证的时候,虽然验证规则并没有采用其原生的方式通过被验证元素的class属性来提供,但是却可以通过“data-val-{rulename}”的命名模式提取相应的验证规则属性值,并最终得到一样验证规则,ASP.NET MVC只需要对两种作简单的适配即可。
我们现在关心的是当我们调用HtmlHelper
1: public class ModelClientValidationRule
2: {
3: public string ErrorMessage { get; set; }
4: public string ValidationType { get; set; }
5: public IDictionary<string, object> ValidationParameters { get; }
6: }
7:
8: public abstract class ModelValidator
9: {
10: //其他成员
11: public virtual IEnumerableGetClientValidationRules();
12: public abstract IEnumerableValidate(object container);
13: }
通过前面的介绍我们知道抽象类ModelValidator中具有一个虚方法GetClientValidationRules用于返回一个ModelClientValidationRule对象的列表。对于所有支持客户端验证的ModelValidator来说,它必须重写该方法以通过重写Validate方法实现的服务端验证逻辑相一致的客户端验证规则。
以用于进行范围验证的RangeAttribute特性对应的RangeAttributeAdapter为例,通过如下的代码片断我们知道它重写了GetClientValidationRules并返回一个ModelClientValidationRangeRule对象元素的列表,该ModelClientValidationRule对象的验证类型为“range”,采用RangeAttributeAdapter的ErrorMessage属性作为自身的错误消息,作为验证范围的上、下限的值成为了该ModelClientValidationRule的两个验证参数,参数分别为“min”和“max”。
1: public class RangeAttributeAdapter : DataAnnotationsModelValidator
2: {
3: //其他成员
4: public override IEnumerableGetClientValidationRules()
5: {
6: string errorMessage = base.ErrorMessage;
7: return new ModelClientValidationRangeRule[] { new ModelClientValidationRangeRule(errorMessage, base.Attribute.Minimum, base.Attribute.Maximum) };
8: }
9: }
10:
11: public class ModelClientValidationRangeRule : ModelClientValidationRule
12: {
13: public ModelClientValidationRangeRule(string errorMessage, object minValue, object maxValue)
14: {
15: base.ErrorMessage = errorMessage;
16: base.ValidationType = "range";
17: base.ValidationParameters["min"] = minValue;
18: base.ValidationParameters["max"] = maxValue;
19: }
20: }
客户端验证还在这里涉及到一个重要的接口IClientValidatable,它具有唯一的GetClientValidationRules方法返回一个以ModelClientValidationRule对象表示的客户端验证规则列表。
1: public interface IClientValidatable
2: {
3: IEnumerableGetClientValidationRules(ModelMetadata metadata, ControllerContext context);
4: }
对于所有支持客户端验证的ValidationAttrubute来说,都需要实现IClientValidatable接口并通过实现GetClientValidationRules方法提供对应的验证规则,而生成的验证规则需要与通过重写的IsValid方法实现的服务端验证逻辑一致。DataAnnotationsModelValidator重写了GetClientValidationRules方法,如果对应的ValidationAttribute实现了IClientValidatable接口,它(ValidationAttribute)的GetClientValidationRules方法被调用返回的ModelClientValidationRule列表作为该方法的返回值。
当我们在某个View中调用HtmlHelper
ASP.NET MVC的客户端验证:jQuery的验证
ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现
ASP.NET MVC的客户端验证:自定义验证