AngularJS検証フォーム機能実装のコード解析

この記事では、主に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>

まず、各フォームには独自の名前が必要です。この名前を使用して、下の入力を制御します。次に、各 input タグ には独自の名前が必要です。名前は重要なステップであり、異なる入力をそれぞれ識別するために使用され、それによって異なる ngModelController を識別します。パターンを使用して、独自の 正規表現

ルールを設定します。 $error を使用して、正規表現が正しいかどうかを確認します。そしてそれを ng-show ディレクティブに割り当てます。エラーがある場合、$error 全体が true を返し、正規表現が合格するまで設定されたプロンプト情報が表示されます。$error は false を返し、ng-show はそれを非表示にします。

上記の簡単な例では、コントローラー

の動作をリセットする必要はありません。すべては 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,&#39;pattern&#39;)">用户名必须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>

rree

判定はコントローラー内のngModelController内で直接行われます。ここには落とし穴があります。それは、$valid などの属性を判断するためのパラメーターが存在しないことです。 $error を判断するには、「何を判断するか」を指定する必要があります。私は独自の正規表現を彼に渡しました。

AngularJs はフォームの送信ボタンを「ロック」することもできます。ただし、現時点では、BUTTON に対応するコントローラーは、特定の入力に対する ngModelController ではなく、フォーム全体に対する ngFormController になっていることに注意してください。したがって、内部の $invalid は、すべての入力に問題があるかどうかを判断することになります。入力すると、すべてが正常にロック解除されます。

考え方:

正規表現やminlengthなどの制限はJSファイルに記述することができます。 🎜

以上がAngularJS検証フォーム機能実装のコード解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。