ASP.NET MVCのクライアント検証:Model検証におけるjQuery検証の実装

19958 ワード
asp.net
原文:
ASP.NET MVCのクライアント検証:Model検証におけるjQuery検証の実装
Unobtrusive JavaScript形式の検証jQueryでのプログラミング方式を簡単に理解した後、ASPを紹介します.NET MVCは、クライアント検証をどのように利用しているのか.サービス側検証は最終的に対応するModelValidatorに実装され、最終的な検証ルールは対応するValidationAttributeに定義される.一方、クライアント検証ルールは、生成された検証されたHTML要素にHtmlHelper対応する拡張方法(例えば、TextBox、EditorFor、EdidtorForModelなど)によって現れる.サービス側検証とクライアント検証は、同じ検証ルールを使用する必要があることは間違いありません.ValidationAttributeプロパティ定義を適用する検証ルールも、クライアント検証ルールに基づくHTMLに反映されます.[本明細書は『How ASP.NET MVC Works?』に同期している]
一、ValidationAttributeとHTML
ASP.NET MVCは、ValidationAttributeの特性に基づいた宣言型Model検証を黙々と採用し、サービス側検証は最終的に2つの書き換え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の拡張メソッド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オブジェクトの2つのプロパティに対応する要素には、ユーザーが入力した値を検証する必要があるかどうかを示す「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は2種類に対して簡単にフィットするだけでよい.
HtmlHelperの対応する拡張メソッドを呼び出してModelオブジェクトのプロパティをフォーム入力要素として表示する場合、「data-val-」を接頭辞とする検証プロパティをどのように生成するかに注目します.ここでは、クライアント検証ルールを記述するために重要なタイプのModelClientValidationRuleについて説明する必要があります.次のコードに示すように、ModelClientValidationRuleには3つの属性があり、文字列属性ErrorMessageとValidationTypeは、IDictionaryの読み取り専用属性ValidationParametersは、クライアント側の検証を支援するパラメータを表し、KeyとValueはそれぞれ検証パラメータ名とパラメータ値を表す.
   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 IEnumerable<ModelClientValidationRule> GetClientValidationRules();
  12:     public abstract IEnumerable<ModelValidationResult> Validate(object container);
  13: }

前述の説明では、抽象クラスModelValidatorには、ModelClientValidationRulesオブジェクトのリストを返すための虚メソッドがあることを示しています.クライアント検証をサポートするすべてのModelValidatorでは、Validateメソッドによって実装されるサービス側検証ロジックが一致するクライアント検証ルールを書き換えるために、このメソッドを書き換える必要があります.
範囲検証のためのRangeAttributeプロパティに対応するRangeAttributeAdapterを例にとると、GetClientValidationRulesが書き換えられ、検証タイプが「range」であるModelClientValidationRangeRuleオブジェクト要素のリストが返されることが、次のコード・スライスで分かります.RangeAttributeAdapterのErrorMessage属性を自身のエラーメッセージとして採用し、検証範囲の上下限の値としてこのModelClientValidationRuleの2つの検証パラメータとなり、パラメータはそれぞれ「min」と「max」である.
   1: public class RangeAttributeAdapter : DataAnnotationsModelValidator<RangeAttribute>
   2: {
   3:     //    
   4:     public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
   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に関し、ModelClientValidationRuleオブジェクトで表されるクライアント検証ルールのリストを返す唯一のGetClientValidationRulesメソッドを有する.
   1: public interface IClientValidatable
   2: {
   3:     IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context);
   4: }

クライアント検証をサポートするすべてのValidationAttrubuteでは、IClientValidatableインタフェースを実装し、GetClientValidationRulesメソッドを実装することによって対応する検証ルールを提供する必要があります.生成された検証ルールは、書き換えられたIsValidメソッドによって実装されたサービス側検証ロジックと一致する必要があります.DataAnnotationsModelValidatorはGetClientValidationRulesメソッドを書き換え、対応するValidationAttributeがIClientValidatableインタフェースを実装している場合、そのメソッドの戻り値として、ValidationAttributeのGetClientValidationRulesメソッドが呼び出されます.
あるViewでHtmlHelperの拡張メソッドを呼び出してModelオブジェクトの属性をフォーム入力要素で提示すると、前述したModelValidatorの提供メカニズムを使用して、ターゲット属性に対応するModelメタデータに基づいて対応するModelValidatorが作成されます.GetClientValidationRulesメソッドを呼び出して、クライアント検証ルールを表すModelClientValidationRuleのリストを取得します.リストが空でない場合、ターゲット属性に対応する要素に検証属性として追加されます.
ASP.NET MVCのクライアント検証:jQueryの検証 ASP.NET MVCのクライアント検証:Model検証におけるjQuery検証の実装 ASP.NET MVCのクライアント検証:カスタム検証
JAvascriptノート:javascript内のオブジェクトの作成を深く分析する(上)
AOPと注釈を使用してJavaログを記録する