1.内部jQuery検証プラグインの動作
2. ASP.Net MVCの控えめな検証によって生成されたHTMLコードを理解する
3. ASP.Net MVCの控えめなjQuery validateプラグインの内部作業。
この記事で説明する内容：
- 控えめなJavaScriptのアイデア
- 通常の検証と控えめな検証の違い
- 控えめな検証について：
- 入力要素、検証のルール、およびその機能
- 検証メッセージとそれらが控えめな検証でどのように機能するか。
控えめなJavaScriptの基本的な考え方
Microsoftは、MVCの最初のバージョンで最初の検証モジュールを導入しました。 モジュールは各バージョンで改善され、ASP.Net MVC 3で目立たない検証に変わりました。
要するに、主に個別のjsファイルに書き込む最新のJavaScriptでさえ、Htmlに関連するデータが必要な場合があり、そのためHtmlページ内にJavaScriptオブジェクトのメタデータを書き込みます。 ページ上のオブジェクトのメタデータを渡すjsファイルから関数を呼び出します。
控えめなJavaScriptの目標の1つは、JavaScriptをHTMLマークアップから分離することです。
詳細については、 こちらを参照してください（著者は、英語版ウィキペディアにある控えめなJavaScriptに関する記事を参照しています。翻訳者）
通常の検証と控えめな検証の違い。
以下は、MVC 2検証と控えめなMVC 3検証を使用して生成されたモデルコードとHTMLマークアップです。
私たちのモデル
C＃
public class ValidationModel { [Required] public string FirstName { get; set; } [Required, StringLength(60)] public string LastName { get; set; } [Range(1, 130)] public int Age { get; set; } }
htmlヘルパーを使用したMVC 2での表現
HTML
<label for="FirstName">FirstName</label> <input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" /> <span id="FirstName_validationMessage" class="field-validation-valid"></span> <label for="LastName">LastName</label> <input id="LastName" class="text-box single-line" type="text" name="LastName" value="" /> <span id="LastName_validationMessage" class="field-validation-valid"></span> <label for="Age">Age</label> <input id="Age" class="text-box single-line" type="text" name="Age" value="" /> <span id="Age_validationMessage" class="field-validation-valid"></span> <script type="text/javascript">// <![CDATA[ if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The FirstName field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":true,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The LastName field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field LastName must be a string with a maximum length of 60.","ValidationParameters":{"max":60},"ValidationType":"length"}]},{"FieldName":"Age","ReplaceValidationMessageContents":true,"ValidationMessageId":"Age_validationMessage","ValidationRules":[{"ErrorMessage":"The field Age must be between 1 and 130.","ValidationParameters":{"min":1,"max":130},"ValidationType":"range"},{"ErrorMessage":"The Age field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Age must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"}); // ]]></script>
htmlヘルパーと控えめな検証を使用したMVC 3での表現
HTML
<label for="FirstName">FirstName</label> <input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." /> <label for="LastName">LastName</label> <input id="LastName" class="text-box single-line" type="text" name="LastName" value="" data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." /> <label for="Age">Age</label> <input id="Age" class="text-box single-line" type="text" name="Age" value="" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." />
このコードは、 Brad Wilsonの記事「ASP.NET MVC 3の控えめなクライアント検証」から引用しています。
ご覧のとおり、HTMLの「input」要素には、どの検証ルールが適用されるのかがわかりません。 ページの各要素に適用される検証情報を含む大きなJavaScriptオブジェクトは1つだけです。
一方、MVC 3で生成された「input」要素を見ると、より多くのメタデータが含まれていることがわかります。 検証に必要なすべての情報は、data- *属性に含まれています。 巨大なJavaScriptオブジェクトは必要ありません
控えめな検証について
1.「input」要素、それらの検証ルール、およびそれらの機能
それでは、「data- *」属性で何が起こるかを見てみましょう。
MVCは、検証ルールに基づいて「data- *」属性を作成します。
jquery.validate.unobtrusiveはルールを読み取り、ルールをパスに変換します。
控えめな検証がこれらのルールを変換した後、「validate（）」メソッドを呼び出し、ルールの配列を設定とともに渡して検証します。
HTML要素の控えめなルールには、3つの部分があります。
- data-val =” true”は、控えめな検証が要素に付加されていることを示す単なるフラグです。
- data-val-rulename =” message”-2つのことを行います。 data-val-rulenameの部分はルールの名前を示し、検証メッセージのテキストはmessageに書き込まれます。
- data-val-rulename-additionalvalues =” value”は、検証を完了するために検証ルールに必要な追加の値を追加します。 （たとえば、値がある値よりも小さく、別の値よりも大きくなければならない場合に、値の範囲の「範囲」を検証する）
生成された入力要素をより詳細に検討し、data- *属性について説明します。
<input id="Name" class="ignore" type="text" name="Name" value="" data-val="true" data-val-required="*" data-val-atleastonerequired="Enter at least Name, Email or Lastname" data-val-atleastonerequired-attributes="Email,LName" />
要素には2つのルールが適用されます。 1つは「必須」の組み込み属性で、もう1つは「atleastonerequired」と呼ばれる独自の属性です。
ユーザーがデータを入力せずに「フォームを送信」をクリックすると、要素が必要であることを示す検証メッセージとして「*」が表示されます。
ユーザーが「atleastonerequired」ルールに違反すると、ユーザーの検証メッセージが表示されます。
2.検証メッセージとそれらが控えめな検証でどのように機能するか。
例から始めましょう。
<!-- Required input using unobtrusive validation --> <input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." /> <!-- The input's validation message placeholder --> <span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid help-inline" />
ご覧のとおり、コンテナにはエラーメッセージ用の2つの「data- *」要素があります
- 「Data-valmsg-for」は、コンテナが属する「input」要素の「name」属性の値です。 入力要素とコンテナの両方が同じフォームタグ内にある必要があります。
- 「Data-valmsg-replace」はデフォルトでtrueに設定されています。 trueとfalseの違いは次のとおりです。trueに設定した場合、コンテナ内のエラーメッセージは違反した検証ルールに応じて変化し、falseの場合、定数になり、コンテンツは変更されません。有効な「to」無効」。
検証ルールの1つに違反した場合、「class」属性の値には「field-validation-error」が含まれ、そうでない場合は「field-validation-valid」が含まれます。
Nadeem Khedr の記事「Asp.net MVCの控えめな検証によって生成されたHTMLを理解する」の翻訳
アップデート06/01/13：シリーズの他の投稿へのリンクを追加