AngularJS入力検証
AngularJSフォームとコントロールは、入力データを検証できます。
確認を入力してください
前の章では、Angularjsの形とコントロールについて学びました。
AngularJSフォームとコントロールは、ユーザーが入力した違法データを検証機能を提供し、警告することができます。
注:クライアントの検証は、ユーザー入力データのセキュリティを確保することができないため、サーバーのデータ検証も必要です。
アプリケーションコード
<!Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> ng-controller = "validatectrl" name = "myform" novalidate> <p> username:<br> <入力タイプ= "text" name = "user" ng-model = "user" reby> <span style = "color:red" ng-show = "myform.user。ユーザー名が必要です。 </span> </span> </p> <p> email:<br> <入力タイプ= "email" name "name" ng-model = "expene" reby> <span style = "color:red" ng-show = "myform.email。$ dirty && myform.email。 </span> <span ng-show = "myform.email。$ error.email">違法なメールアドレス。 </span> </span> </p> <p> <入力タイプ= "ng-disabled =" myform.user。$ dirty && myform.user。$ invalid || myform.email。 function($ scope){$ scope.user = 'john doe';実行結果:
検証例
ユーザー名:
郵便:
注:HTMLフォーム属性Novalidateは、ブラウザのデフォルト検証を無効にするために使用されます。
例分析
AngularJS NG-Modelディレクティブは、入力要素をモデルにバインドするために使用されます。
モデルオブジェクトには、ユーザーと電子メールの2つのプロパティがあります。
ng-showディレクティブを使用しました。色:レッドは、メッセージが$ dirtyまたは$ nivalidの場合にのみ表示されます。
| 財産 | 説明する |
|---|---|
| $汚い | フォームに記入するための記録があります |
| $有効 | フィールドコンテンツは合法です |
| $無効 | フィールドコンテンツは違法です |
| $ PRISTINE | フォームに記録された記録はありません |
上記は、AngularJS入力検証情報の編集です。後で補足し続けます。勉強する学生に役立つことを願っています。