天天看點

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>

繼續閱讀