AngularJS はフォーム検証に ngMessages を使用します_AngularJS

AngularJS は 2009 年に誕生し、Misko Hevery らによって作成され、後に Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。 AngularJS には多くの機能があり、その最も核となる機能は、MVVM、モジュール化、自動双方向データ バインディング、セマンティック タグ、依存関係注入などです。

「ngMessages」という名前のモジュールは、npm install angular-messages を通じてインストールされます。 ngMessages を使用する前に、次のような検証を記述します:

<form name="userForm">
<input 
type="text" 
name="username" 
ng-model="user.username" 
ng-minlength="3" 
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

上記は、考えられる検証失敗をそれぞれリストし、エラー メッセージを表示するかどうかを手動で記述します。

「ngMessages」モジュールでは、大まかに次のように書くことができます:

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>

ngMessages は、どのエラーを表示するかを自動的に決定します。

ngMessages を使用するためのいくつかの重要なポイント:

● npm install angular-messages
● 引用: angular-messages.js
● 依存関係: angular.module('app',['ngMessages'])

これは簡単なデモ、ファイル構造です:

node_modules/
app.js
emailmessages.html
インデックス.html

インストールは次のとおりです:

npm インストール ブートストラップ
npm インストール angular
npm install angular-messages

==index.html

用户名

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

emailmessages.html

電子メールに関連するフォーム検証をここに配置し、b1010a975dc5ebb8b976dafe68a17c7a16b28748ea4df4d9c2150843fecfba68 を通じてページ上のどこかに表示します。

<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>

ps: 一般的に使用されるフォーム検証手順

1. 必須フィールドの確認

フォーム入力が完了したかどうかに関係なく、入力フィールド要素に HTML5 必須タグを追加するだけです:

コードをコピーします コードは次のとおりです:

637a688f6c4bac86a7f2e3569e128b2c

2. 最小の長さ

フォーム入力のテキストの長さが特定の最小値より大きいかどうかを確認するには、入力フィールドでコマンド ng-minleng= "{number}" を使用します。

コードをコピーします コードは次のとおりです:

98d5fcb979fcf1c21f11fdb6e9d615a2

3. 最大長

フォーム入力のテキストの長さが特定の最大値以下であるかどうかを確認するには、入力フィールドでコマンド ng-maxlength="{number}" を使用します。

コードをコピーします コードは次のとおりです:

44bcd696cf393169990dcefab9a1c0d1

4. パターンマッチング

ng-pattern="/PATTERN/" を使用して、入力が指定された正規表現と一致することを確認します。

コードをコピーします コードは次のとおりです:

44ccc91a1cd14c1ff9a3a4b62eafbda4

5. メール

入力コンテンツが電子メールであるかどうかを確認するには、次のように入力タイプを電子メールに設定するだけです:

コードをコピーします コードは次のとおりです: 0fc2238b24406628fab06303f67dd720

6. 数字

入力内容が数値であるかどうかを確認し、入力タイプを数値に設定します:

コードをコピーします

コードは次のとおりです: 1005edcba35f1e29b15d03212ac61afe

7. URL

入力コンテンツが URL であるかどうかを確認し、入力タイプを URL に設定します:

コードをコピーします

コードは次のとおりです: b4a4f76522ddf066026eb75900ac307e