私はフロントエンドのプログラマーではありませんが、フロントエンドで検証の良い仕事をすることがどれほど重要かを理解しています。
このようにして、バックエンドはより多くの息を吸うことができ、バックエンドと比較すると、フロントエンドはユーザーの幸福感を実際に改善できるからです。
AngularJSは非常に便利なフォーム検証関数を提供し、ここに記録します。
最初に次のコードから始めます
コードコピーは次のとおりです。
<form ng-app = "myApp" ng-controller = "validationController" name = "mainform" novalidate>
<p>メール：
<input type = "email" name = "email" ng-model = "email"必須>
<span style = "color：red" ng-show = "mainform.email。$ dirty && mainform.email。$ invalid">
<span ng-show = "mainform.email。$ error.required">電子メールが必要です。</span>
<span ng-show = "mainform.email。$ error.email">無効な電子メールアドレス。</span>
</span>
</p>
<p>
<入力型= "submit" ng-disabled = "mainform。$ nivalid">
</p>
</form>
<スクリプト>
angular.module（ 'myapp'、[]）
.controller（ 'validationController'、['$ scope'、function（$ scope）{
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]）;
</script>
入力タグのいくつかの検証オプションは、通常、HTML5タグで使用されます。
必須
<入力型= "テキスト"必須 />
長さ
ディレクティブng-minlength/ng-maxlengthを使用します
<入力型= "text" ng-minlength = "5" />
特定の形式
たとえば、電子メール、URL、および番号は、タイプを対応するタイプに設定するだけです。たとえば、：
コードコピーは次のとおりです。
<入力型= "email" name = "email" ng-model = "user.email" />
<入力型= "number" name = "age" ng-model = "user.age" />
<入力型= "url" name = "homepage" ng-model = "user.facebook_url" />
パターンマッチング
たとえば、ディレクティブng-patternを使用してください。
コードコピーは次のとおりです。
<input type = "text" ng-pattern = "[az]" />
フォームプロパティ、これらのプロパティにより、フォームでの動作が容易になります
手付かず/汚い
修正されたかどうかを示します。
コードコピーは次のとおりです。
<form name = "mainform" ng-controller = "OrderController">
<入力型= "email" name = "useremail" ng-model = "myemail" />
{{mainform.useremail。$ pristine}}
{{mainform.useremail。$ dirty}}
</form>
formname.fieldname。$ pristineモードにアクセスして、入力にはng-model宣言が必要です。
コードコピーは次のとおりです。
有効/無効
検証に合格するかどうかを示します。
コードコピーは次のとおりです。
$エラー
検証情報をフォーム、および検証が失敗した場合に対応する情報が返されます。
AngularJSは、フォームステータスのためにCSSクラスを提供します
コードコピーは次のとおりです。
.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid
たとえば、検証を緑色に渡して赤に失敗させます：
コードコピーは次のとおりです。
input.ng-valid {
色：緑;
}
input.ng-invalid {
色：緑;
}
与えられた例では、1つの電子メールの検証が非常に書かれています。いくつかのフィールドを追加し、いくつかの異なるプロンプトを追加し、いくつかのイベントを追加すると、コードは乱雑になります。
実際、これを行うことはお勧めされていません。より良い方法があります。
Angular-Messages.jsを使用することです
まず第一に、これらの2つのステップを忘れないでください
コードコピーは次のとおりです。
<スクリプトsrc = "angular-messages.js"> </script>
angular.module（ 'myapp'、['ngmessages']）
わかりました、最初にそれらの重複をNGメッセージとNGメッセージに置き換え、上記の例は次のとおりです。
コードコピーは次のとおりです。
<form ng-controller = "validationController" name = "mainform">
<p>メール：
<入力
type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50"必須 />
<div style = "color：red" ng-messages = "mainform.email。$ error" ng-messages-multiple>
<p ng-message = "必須">電子メールが必要です。</p>
<p ng-message = "email">無効な電子メールアドレス。</p>
<p ng-message = "minlength"> min Length 10 </p>
<p ng-message = "maxlength">最大長50 </p>
</div>
</p>
<p>
<入力型= "submit" ng-disabled = "mainform。$ invalid" />
</p>
</form>
機能に変更はありません。重複コードのみが削除されました。
Ng-MessasgeとNgメッセージを区別することに注意してください。 （）と少し似ていますか？その背後にあるng-messages-multipleは、複数のプロンプトを同時に表示するために使用されます。
しかし、これはまだ十分ではありません。 NGメッセージのコンテンツが省略されていても、複数のフィールドに必要な検証が存在する場合でも、重複があります。
さらに、異なるページのフォームに同じコンテンツが含まれる場合、ますます繰り返し検証プロンプトがあります。
この問題を解決するために、NG-Messages-Include Directiveを使用できます。
この指令は、テンプレートを参照するために使用されます。たとえば、上記の例は次のようになります。
コードコピーは次のとおりです。
<form ng-controller = "validationController" name = "mainform">
<p>メール：
<入力
type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50"必須 />
<div style = "color：red" ng-messages = "mainform.email。$ error" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<入力型= "submit" ng-disabled = "mainform。$ invalid" />
</p>
</form>
それは複雑ではありません、何かを追加しましょう。
プロンプトをより友好的にするために（？）、カーソルが去った後に現れるプロンプトの効果を実現しようとします。
現時点では、ディレクティブを使用する方がはるかに便利です。ここでは、最初に指示に関連するいくつかの情報を含めます。
最初にそれを実行してから、それについて話します：
コードコピーは次のとおりです。
var myapp = angular.module（ 'myapp'、[]）
.controller（ 'validationController'、['$ scope'、function（$ scope）{
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]）
.Directive（ 'Hintonblur'、[function（）{
戻る {
要求： 'ngmodel'、
リンク：function（scope、element、attrs、ctrl）{
ctrl.focused = false;
element.bind（ 'focus'、function（evt）{
scope。$ apply（function（）{ctrl.focused = true;}）;
}）。bind（ 'Blur'、function（evt）{
scope。$ apply（function（）{ctrl.focused = false;}）;
}）;
}
}
}]）;
ここでは、CURSORが特定のプロパティにあるかどうかを判断するためにFOCUDEDを使用します。 FocusまたはBlurイベントがHintonblurディレクティブを使用してオブジェクトに発生すると、フォーカスの状態が変更されました。
フォームは次のように変更されます。
コードコピーは次のとおりです。
<form ng-controller = "validationController" name = "mainform">
<p>メール：
<input type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50"必須ヒントオンブル />
<div style = "color：red" ng-messages = "mainform.email。$ error" ng-show = "！mainform.email.focused" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<入力型= "submit" ng-disabled = "mainform。$ invalid" />
</p>
</form>
ng-showに焦点を合わせた判断を追加すると、falseのときにプロンプトが表示されます。
今はそのように見えます。
ディレクティブも使用する検証方法と有効性をカスタマイズします。
記入したメールが占有していることを確認します。簡単なシミュレーションは次のとおりです。
コードコピーは次のとおりです。
.directive（ 'isalreadytaken'、function（）{
戻る {
要求： 'ngmodel'、
リンク：function（scope、ele、attrs、ctrl）{
ctrl。$ parsers.push（function（val）{
ctrl。$ setValidity（ 'EmailAvailable'、false）;
var emailTable = [
for（var i = 0; i <emailtable.length; i+= 1）
if（val == emailTable [i]）
戻る;
ctrl。$ setValidity（ 'EmailAvailable'、true）;
valを返します。
}）
}
}
}）
入力要素にis-leady-taken属性を追加し、別のngメッセージを追加します。
コードコピーは次のとおりです。
<p ng-message = "emailavailable">既に削除されています！他のメールアドレスをお試しください！</p>