AngularJS入力の検証
AngularJSフォームとコントロールは、データ入力を検証することができます。
入力の検証
前のセクションでは、あなたはAngularJSのフォームとコントロールに関する知識を学んできました。
AngularJSフォームとコントロールは、検証機能とユーザーに警告することによって入力された不正なデータを提供することができます。
 | クライアントは、ユーザのデータ入力のセキュリティを確保することができないことを確認し、データ検証サーバも必要です。 |
|---|
応用コード
<！DOCTYPE HTML>
<HTML>
<SCRIPT SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
<ボディ>
<H2>の検証例</ H2 >
<フォームNG-アプリ= "て、myApp " NG-コントローラ= "validateCtrl"
名前 =「あるmyForm "NOVALIDATE>
<P> ユーザー名：<BR>
<input type = "text"名 = "ユーザー" NG-モデル= "ユーザー"が必要>
<スパンのスタイル= "色：赤 、「NG-ショー=" .. MyForm.user $汚れた&& myForm.user $無効」>
<スパンNG-ショー= "myForm.user 。$ Error.required">ユーザー名が必要です。 </スパン>
</スパン>
</ P>
<P> Eメール：<BR>
<入力タイプ= "メール"名前 = "メール" NG-モデル= "メール"が必要>
<スパンのスタイル= "色：赤 、「NG-ショー=" .. MyForm.email $汚れた&& myForm.email $無効」>
<スパンNG-ショー= "myForm.email 。$ Error.required">メールボックスをする必要があります。 </スパン>
<スパンNG-ショー= "myForm.email 。$ Error.email">違法なメールボックス。 </スパン>
</スパン>
</ P>
<P>
<入力タイプは、= "提出します"
= "myForm.user。$ NG-無効汚い&& myForm.user。無効$ ||
myForm.email。$汚れた&& myForm.email。$無効」>
</ P>
</フォーム>
<スクリプト>
VARアプリ= angular.module（ 'て、myApp'、[]）;
app.controller（ 'validateCtrl'、関数（$スコープ）{
$ Scope.user = 'ジョン・ドウ';
$ Scope.email = '[email protected]';
}）;
</スクリプト>
</ BODY>
</ HTML>
<HTML>
<SCRIPT SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
<ボディ>
<H2>の検証例</ H2 >
<フォームNG-アプリ= "て、myApp " NG-コントローラ= "validateCtrl"
名前 =「あるmyForm "NOVALIDATE>
<P> ユーザー名：<BR>
<input type = "text"名 = "ユーザー" NG-モデル= "ユーザー"が必要>
<スパンのスタイル= "色：赤 、「NG-ショー=" .. MyForm.user $汚れた&& myForm.user $無効」>
<スパンNG-ショー= "myForm.user 。$ Error.required">ユーザー名が必要です。 </スパン>
</スパン>
</ P>
<P> Eメール：<BR>
<入力タイプ= "メール"名前 = "メール" NG-モデル= "メール"が必要>
<スパンのスタイル= "色：赤 、「NG-ショー=" .. MyForm.email $汚れた&& myForm.email $無効」>
<スパンNG-ショー= "myForm.email 。$ Error.required">メールボックスをする必要があります。 </スパン>
<スパンNG-ショー= "myForm.email 。$ Error.email">違法なメールボックス。 </スパン>
</スパン>
</ P>
<P>
<入力タイプは、= "提出します"
= "myForm.user。$ NG-無効汚い&& myForm.user。無効$ ||
myForm.email。$汚れた&& myForm.email。$無効」>
</ P>
</フォーム>
<スクリプト>
VARアプリ= angular.module（ 'て、myApp'、[]）;
app.controller（ 'validateCtrl'、関数（$スコープ）{
$ Scope.user = 'ジョン・ドウ';
$ Scope.email = '[email protected]';
}）;
</スクリプト>
</ BODY>
</ HTML>
»をお試しください
| HTMLフォームは、ブラウザのデフォルトの検証を無効にするための妥当性チェックなし属性 。 |
|---|
分析の例
AngularJS NGモデル指示は、モデルへの入力要素を結合するために使用されます。
ユーザーと電子メール ：モデルオブジェクトには、2つの属性があります 。
私たちは、色をNG-showコマンドを使用します。メッセージ内の赤だけ汚い$または$無効ディスプレイです。
| プロパティ | 説明 |
|---|---|
| $ダーティ | レコードを埋めるための形式があります |
| $有効 | 正当なフィールドの内容 |
| $無効 | フィールドの内容が違法です |
| $プリスティン | レコードを埋めるためにno形式はありません |