AngularJS 输入验证

AngularJS フォームとコントロールは、入力されたデータを検証できます。

输入验证

これまでのいくつかの章で、AngularJS フォームとコントロールに関する知識を学びました。

AngularJS フォームとコントロールは検証機能を提供し、ユーザーが入力した不正なデータに対して警告することができます。

Note クライアント側の検証はユーザーが入力したデータの安全性を保証できないため、サーバー側のデータ検証も必須です。

应用代码

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>用户名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">ユーザー名は必須です。</span>
  </span>
</p>

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">メールアドレスが必要です。</span>
  <span ng-show="myForm.email.$error.email">無効なメールアドレス。</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>

尝试一下 »

Note HTML フォーム属性novalidateブラウザのデフォルト検証を無効にするために使用します。

实例解析

AngularJS ng-modelディレクティブは、入力要素をモデルにバインドするために使用されます。

モデルオブジェクトには2つの属性があります：userとemail。

私たちは使用したng-show指令，color:redメール内の$dirty 或 $invalidすべてが true の場合にのみ表示されます。

属性 描述
$dirty フォームに記入記録がある
$valid フィールド内容が有効な
$invalid フィールド内容が無効な
$pristine フォームに記入記録がない
其他扩展