一般的なフォーム検証命令
1。必要な検証
フォーム入力が記入されているかどうかにかかわらず、入力フィールド要素に必要なHTML5タグを追加するだけです。
次のようにコードをコピーします。<入力型= "テキスト"必須 />
2。最小長
フォーム入力のテキストの長さが特定の最小値よりも大きいことを確認し、入力フィールドで命令ng-minleng = "{number}"を使用します。
次のようにコードをコピーします。<入力型= "テキスト" ng-minlength = "5" />
3。最大長
フォーム入力のテキストの長さが特定の最大値以下であることを確認し、入力フィールドで命令ng-MaxLength = "{number}"を使用します。
次のようにコードをコピーします
4。パターンマッチング
ng-pattern = "/pattern/"を使用して、入力が指定された正規表現と一致するようにします。
コードコードを次のようにコピーします
5。メール
入力コンテンツが電子メールであることを確認するには、以下のように入力タイプをメールに設定するだけです。
コードを次のようにコピーします
6。番号
入力コンテンツが数字であることを確認し、入力タイプを番号に設定します。
次のようにコードをコピーします
7。URL
入力コンテンツがURLであることを確認し、入力タイプをURLに設定します。
コードを次のようにコピーします
特定の実装でこれらのフォームの検証をテストしましょう。
<div> <form role = "form"> <div> <div> <div> <label for = "name"> 1. Reabole> </div> <div> <入力id = "type =" text "必須ng-model = 'user.name'/> </div> </div> <div> <div> <label for =" minlength "> 2。最小長= 5 </label> </div> <div> <input type = "text" id = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> </div> </div> <div> ng-maxlength = "20"/> </div> </div> <div> <div> <label for = "minlength"> 4。パターンマッチング</label> </div> <div> <入力タイプ= "text" id = "minlength" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> </div> </div> <div> <div> <label for = "email"> 5。電子メール</label> </div> </div> <div> <ラベル= "email"> 5。電子メール</label> </div> <div> <入力タイプ= "email" id "email" name = "email" ng-model = "user.email"/> </div> </div> <div> <div> <div> <"age"> 6。番号</label> </div> <div> <入力タイプ= "number" id = "age" name = "age" ng-model = "user.age"/> </div> </div> <div> <div> <label for = "url"> 7。 </div> </div> <div> <input type = "submit" value = "submit"/> </div> </form> </div> <div>1。必要なフィールド：{{user.name}} <br>2。min。長さ= 5：{{user.minlength}} <br> 3。最大長= 20：{{user.maxlength}} <br> 4。パターンマッチング：{{user.pattern}} <br>5。email：{{user.email}}} <br> 6。 7.url：{{user.url}} <br> </div>テストでは、式が検証を満たした場合にのみ、双方向結合がリアルタイムで実行されることがわかりました。同時に、レンダリングは次のとおりであることがわかりました。
何も起こらなかったようですが、あまり良くないHTML5検証のチームを持つブラウザに移植した場合、[この例のIE9]をテストしましょう。問題は、一部のフィールドがまったく検証されていないことです。
実際、上記の例では、HTML5検証とNG独自の検証を使用してそれを結合しました。 HTML5の確認はサポートされていませんが、NGの無料検証は正常に実行されます。ソリューションは非常にシンプルです。パターンマッチングを使用してこれらの状況を解決するか、検証指示をカスタマイズして検証ルールを書き換えたり再定義したりすることができます。
フォームのブラウザのデフォルト検証動作をブロックする
フォーム要素にNovalidateタグを追加するだけです。問題は、どのようなフィールドが有効であるか、どのフィールドが違法または無効であるかをどのようにして知ることができますか？ NGはこれに対する優れたソリューションも提供します。フォームのプロパティには、属する$スコープオブジェクトにアクセスでき、$ scopeオブジェクトにアクセスできるため、JavaScriptはDOMのフォームプロパティに間接的にアクセスできます。これらのプロパティを使用すると、フォームにリアルタイムで応答できます。
これらのプロパティは、format formname.inputfieldname.propertyを使用してアクセスできます。
変更されていないフォーム
ユーザーがフォームを変更したかどうかを示すブールプロパティ。それがtureである場合、それは変更されていないことを意味します。 falseは、それが変更されたことを意味します：
コードコピーは次のとおりです。formname.inputfieldname。$ pristine;変更されたフォーム
ユーザーが実際にフォームを変更した場合にのみ、ブールプロパティ。フォームが検証されているかどうかに関係なく：
コードコピーは次のとおりです。formname.inputfieldname。$ dirty
検証済みのフォーム
フォームが検証に合格したかどうかを示すブールプロパティ。フォームが現在検証されている場合、それは真実になります：
コピーコードは次のとおりです。formname.inputfieldname。$有効コピーコードは次のとおりです。formname.inputfieldname。$ invalid
最後の2つのプロパティは、DOM要素を表示または隠すために使用する場合に特に役立ちます。同時に、特定のクラスをセットアップする場合にも非常に便利です。
間違い
これは、AngularJS：$エラーオブジェクトによって提供される別の非常に有用なプロパティです。現在のフォームのすべての検証コンテンツと、それらが合法かどうかに関する情報が含まれています。次の構文を使用してこのプロパティにアクセスします
コードコピーは次のとおりです。formname.inputfieldname。$エラー
検証が失敗した場合、このプロパティの値は真です。値が偽の場合、入力フィールドの値が検証に合格したことを意味します。
以下に、これらの検証手順をテストします。
<！doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width =" device-width "/> <title> index </content/css/boottrap.min.css" le = "styleSheet src = "〜/javascript/angular.min.js"> </script> <style type = "text/css"> body {padding-top：30px; } </style> </head> <body ng-controller = "mycontroller"> <div> <form role = "form" name = "myform" ng-submit = "submitform（myform。$ valid）" novalidate> <div> <div> <div> <label for = "name"> 1。 ng-model = 'user.name'/> <span ng-show = "myform.name。$ dirty && myform.name。$ valid"> </span> </div> </div> <div> <div> <label = "minlength"> 2。最小長= 5 </label> </div> <div> <入力タイプ= "text" id = "minlength" name = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> <span ng-show = "myform.minlength。$ dirty && myform.minlength。 for = "maxlength"> 3.maximum length = 20 </label> </div> <div> <入力タイプ= "text" id "maxlength" name = "maxlength" ng-model = "user.maxlength" ng-maxlength = "20"/> <span ng-shoh = "myform.maxlength。 </div> <div> <div> <ラベル= "pattern"> 4。パターンマッチング</label> </div> <div> <入力タイプ= "テキスト" id = "pattern" name = "pattern" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.pattern。 <ラベル= "email"> 5。電子メール</label> </div> <div> <入力タイプ= "email" id "email" name "name" email "ng-model =" user.email "/> <span ng-show =" myform.email。$ dirty && myform.email。番号</label> </div> <div> <入力タイプ= "number" id = "age" name = "age" ng-model = "user.age"/> <span ng-show = "myform.age。$ dirty && myform.age。 id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myform.url。$ dirty && myform.url。 {{user.name}} $ pristine [変更されていない]：{{myform.name。$ pristine}} $ dirty [modified]：{{myform.name。$ dirty}} $ invalid [vailed]：{{myform.name。$ invalid}}} $ name $ {nam.必須：{{myform.name。$ error.required}} <br>2。motmincelength = 5：{user.minlength}} $ pristine [modified]：{{myform.minlength}} $ dirty} $ dirty {{myform.minlength。$ nivalid}} $ invalid【確認成功{{myform.maxlength。$ pristine}} $ dirty} modified】：{{myform.maxlength。$ dirty}} $ invalid【検証失敗詳細：{{{myform.maxlength。$ error}} <br> 4。パターンマッチング：{{user.pattern}} $ pristine【変更されていない】：{myform.pattern。$ pristine}} $ dirty {{myform.pattern。$ nivalid}} $ invalid}検証成功{{myform.email。$ pristine}} $ dirty dirty {{myform.email。$ error}} <br>6。number：{{user.age}} $ pristine}修正notedede：{{myform.age。$ pristine}} $ dirty $ invalid【検証成功{{myform.url。$ dirty}} $無効な【検証失敗</body> </html> <script type = "text/javascript"> angular.module（ 'mytest'、[]）.controller（ 'mycontroller'、function（$ scope）{$ scope.submitform = function（asvalid）{if（！isvalid）{alert（ 'a alert'）;効果は次のとおりです。
同時に、NGは、これらの検証指示のためのいくつかのCSSスタイルをターゲットを絞った方法で設定しました。
それらは次のとおりです：
コードコピーは次のとおりです。.ng-valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * angular */。ng-invalid-Required {} .ng-invalid-minlength {} .ng-valid-max-length {} .ng-valid-min-length {}。
それらは、フォーム入力フィールドの特定の状態に対応します。
たとえば、フィールドへの入力が違法である場合、.NG-INVLIDクラスがこのフィールドに追加されます。お気に入りのCSSを編集できます。これらのクラスを個人的にカスタマイズして、特定のシナリオアプリケーションを実装できます。
ただし、デフォルトの検証命令は、実際のアプリケーションシナリオを完全に満たすことができない場合があり、カスタム検証手順の関数もNGによって提供されます。
まず、簡単な例を見てみましょう。
angular.module（ "mytest"、[]）.directive（ 'mwillemail'、[function（）{return {require： "ngmodel"、link：function（scope、element、attr、ngmodel）{if（ngmodel）{var emailsregexp = /^（Z0-9 ！#$ %&'*+/ = ??^_ `{|} ~entunturned+ ngmodel。ページHTMLのコードは次のとおりです。
<form role = "form" id = "custom_form" name = "custom_form" novelidate> <div> <label>複数の電子メール< /label> <div> <入力倍数email nmail = "user_email" ng-model = "user.email" rebyholder = "custom検証、複数の電子メールアドレス、"; "; </div> </div> <div> <input ng-disabled = "custom_form。$ nivalid" type = "submit" value = "submit"/> </div> </form>
コードは非常に単純で、効果は次のとおりです。
このコードは非常に簡単ですが、ngmodelControllerのいくつかの重要なプロパティが含まれます。 $ ViewValue
$ ViewValueプロパティは、ビューを更新するために必要な実際の文字列を保持します。
$ modelValue
$ ModelValueはデータモデルによって保持されます。 $ ModelValueと$ ViewValueは、$パーサーパイプラインが動作するかどうかによって異なる場合があります。
$パーサー
$パーサーの値は、関数で構成される配列です。ユーザーがコントローラーと対話し、ngmodelControllerの$ setViewValue（）メソッドが呼び出されると、ngmodelControllerの関数は、ユーザーがコントローラーと対話するときに1つずつ呼び出され、ngmodelControllerの$ setViewValue（）メソッドはピペリンの形式で1つと呼ばれます。 DOMからNGModelによって読み取られた値は、$パーサーの関数に渡され、パーサーによって順番に処理されます。これは、値を処理および変更するためです。
注：ngmodel。$ setViewValue（）関数は、スコープのビュー値を設定するために使用されます。
ngmodel。$ setViewValue（）関数はパラメーターを受け入れることができます。
値（文字列）：値パラメーターは、ngmodelインスタンスに割り当てる実際の値です。
このメソッドは、コントローラーのローカル$ ViewValueを更新し、値を各$パーサー関数（バリデーターを含む）に渡します。値が解析され、$パーサーパイプラインのすべての関数が呼び出されると、値は$ modelvalueプロパティに割り当てられ、命令でNGモデルプロパティが提供する式に渡されます。最後に、すべての手順が完了した後、 $ ViewChangelistenersのすべてのリスナーが呼び出されます。 $ setViewValue（）のみを呼び出すと、新しいダイジェストループが呼び出されないため、ディレクティブを更新する場合は、$ ViewValueを設定した後にDigestを手動でトリガーする必要があることに注意してください。 $ setViewValue（）メソッドは、カスタムディレクティブ（コールバック関数を使用してjQueryプラグインを使用するなど）でカスタムイベントをリスニングするのに適しています。$ ViewValueを設定し、コールバックが呼び出されたときにDigestループを実行したいと思います。
$フォーマッツ
$フォーマッタの値は、データモデルの値が変更されたときにパイプラインの形で1つずつ呼ばれる関数の配列です。 $パーサーのパイプラインには影響しないため、この値がバインドされたコントロール内の表示に値をフォーマットおよび変換するために使用されます。
$ viewchangelisteners
$ ViewChangelistenersの値は、ビューの値が変更されたときにパイプラインの形で1つずつ呼ばれる関数の配列です。 $ viewchangelistenersを使用すると、$ watchを使用せずに同様の動作を実現できます。返品値は無視されるため、これらの関数は値を返す必要はありません。
$エラー
$エラーオブジェクトは、検証と対応するエラー情報に合格していないバリデーター名を保持します。
$ PRISTINE
$ Pristineの値はブール値であり、ユーザーがコントロールを変更したかどうかを知ることができます。
$汚い
$ dirtyの値は$ Pristineの反対であり、ユーザーがコントロールと対話したかどうかを知ることができます。
$有効
$有効な値は、現在のコントロールにエラーがあるかどうかを示します。エラーがある場合は値がfalseで、エラーがない場合は値が真です。
$無効
$ invalid値は、現在のコントロールに少なくとも1つのエラーがあるかどうかを示し、その値は有効な$の反対です。
基本的な知識ポイントを学習した後、カスタム検証の執筆方法を深く学ぶ必要があります。 NG1.3の後、検証命令の使いやすさが改善されました。
上記は、編集者によって紹介されたAngularJS検証フォームの使用例の詳細な説明です。私はそれがあなたを助けることができることを願っています。将来、AngularJS検証フォームの関連知識を引き続き更新します。 wulin.comのウェブサイトに注意してください！