天天看点

ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现一、ValidationAttribute与HTML二、客户端验证规则的生成

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

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

通过上面的这段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分别表示验证参数名和参数值。

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

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

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

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

<a href="http://www.cnblogs.com/artech/archive/2012/06/17/client-validation-01.html">ASP.NET MVC的客户端验证:jQuery的验证</a>

<a href="http://www.cnblogs.com/artech/archive/2012/06/18/client-validation-02.html">ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现</a>

<a href="http://www.cnblogs.com/artech/archive/2012/05/15/custom-client-validation.html">ASP.NET MVC的客户端验证:自定义验证</a>

继续阅读