この記事では、主にAngularJSフォーム検証機能を紹介し、具体的な例に基づいてAngularJSフォーム検証の操作手順、実装テクニック、および関連する注意事項を分析します。必要な友人はそれを参照できます
この記事では、 AngularJS フォーム検証機能の例。参考のために皆さんと共有してください。詳細は次のとおりです。
AngularJS の管轄下で、各フォームは ngFormController のインスタンスを作成します。フォーム内の各入力は、このインスタンスの下に ngModelController インスタンスを作成して、各入力の動作を制御します。
まずは簡単な認証から始めてください。
AngularJs の ngModelController はいくつかのプロパティを提供します: $pristine
;$dirty
;$valid
;$invalid
;$error
$pristine
;$dirty
;$valid
;$invalid
;$error
pristine
:表单并没有改变。dirty
:表单改变了。valid
:全部控件符合验证规则。invalid
:至少有一个控件不符合验证规则。error
pristine
: フォームは変更されていません。 dirty
: フォームが変更されました。 valid
: すべてのコントロールは検証ルールに準拠しています。 無効
: 少なくとも 1 つのコントロールが検証ルールに準拠していません。 error
: エラーがありますが、何が問題なのかわかりません。 次のようにフォームを作成します: <form name="userForm" method="#" action="#"> <label for="name">用户名1</label> <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required> <span ng-show="userForm.name.$error.pattern">用户名必须XXXX</span> </form>
上記の簡単な例では、コントローラー
の動作をリセットする必要はありません。すべては AngularJs のデフォルトです。 ng-show の判定コードは後から実際に JS で完成させることができ、ngModelController の具体的な処理がわかることがわかります。<!--html--> <form name="userForm" ng-controller="main" method="#" action="#"> <label for="name">用户名1</label> <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required> <span style="color:red" ng-show="showError(userForm.name,'pattern')">用户名必须XX</span> <span style="color:green" ng-show="showSuccess(userForm.name)">成功!</span> <!--对按钮进行动态锁定--> <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button> </form>
考え方:
正規表現やminlengthなどの制限はJSファイルに記述することができます。 🎜以上がAngularJS検証フォーム機能実装のコード解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。