参考手册
AngularJS 表单
AngularJS API

AngularJS 表单验证

AngularJS 可以验证输入数据。

表单验证

AngularJS 提供客户端表单验证。

AngularJS 监视表单和输入字段（输入、文本区域、选择）的状态，并允许您通知用户当前状态。

AngularJS 还保存了关于它们是否被触摸、修改或未被修改的信息。

您可以使用标准 HTML5 属性来验证输入，也可以创建自己的验证函数。

客户端验证无法单独保护用户输入。服务器端验证也是必要的。

必填

使用 HTML5 属性 required 指定必须填写输入字段:

实例

必填输入字段:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="">
  6. <p>尝试在输入字段中写入:</p>
  8. <form name="myForm">
  9. <input name="myInput" ng-model="myInput" required="">
  10. </form>
  12. <p>输入的有效状态为:</p>
  13. <h2>{{myForm.myInput.$valid}}</h2>
  15. </body>
  16. </html>
运行一下

E-mail

使用 HTML5 类型 email 指定值必须是 E-mail 格式:

实例

输入字段必须是电子邮件:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="">
  6. <p>尝试在输入字段中写入电子邮件地址:</p>
  8. <form name="myForm">
  9. <input type="email" name="myInput" ng-model="myInput">
  10. </form>
  12. <p>输入的有效状态为:</p>
  13. <h2>{{myForm.myInput.$valid}}</h2>
  14. <p>请注意，在开始写入之前，输入字段的状态为 "true"，即使它不包含电子邮件地址。</p>
  16. </body>
  17. </html>
运行一下

表单状态和输入状态

AngularJS 不断更新表单和输入字段的状态。

输入字段具有以下状态:

  • $untouched 这个字段没有被触发过
  • $touched 这个字段已经被触发过
  • $pristine 这个字段还没有被修改过
  • $dirty 这个字段已经被修改
  • $invalid 这个字段内容不合法
  • $valid 这个字段内容合法

它们都是输入字段的属性，不是 true 就是 false.

表单都有以下状态:

  • $pristine 尚未修改任何字段
  • $dirty 一个或多个已修改
  • $invalid 表单内容不合法
  • $valid 表单内容合法
  • $submitted 表单已提交

它们都是表单的属性，不是 true 就是 false。

可以使用这些状态向用户显示有意义的消息。例如，如果某个字段是必填字段，而用户将其留空，则应向用户发出警告:

实例

如果字段已被触及且为空，则显示错误消息:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="">
  6. <p>尝试将第一个输入字段留空:</p>
  8. <form name="myForm">
  9. <p>名称:
  10. <input name="myName" ng-model="myName" required="">
  11. <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名称是必填的</span>
  12. </p>
  14. <p>地址:
  15. <input name="myAddress" ng-model="myAddress" required="">
  16. </p>
  18. </form>
  20. <p>我们使用 ng-show 指令仅在字段已被触及且为空时显示错误消息。</p>
  22. </body>
  23. </html>
运行一下

CSS 样式表

AngularJS 根据表单和输入字段的状态向其添加 CSS 样式表。

在输入字段中添加或删除以下 CSS:

  • ng-untouched 字段未被触及
  • ng-touched 字段已被触及
  • ng-pristine 字段尚未修改
  • ng-dirty 字段已修改
  • ng-valid 字段内容合法
  • ng-invalid 字段内容不合法
  • ng-valid-key 每次验证一个键。示例：ng-valid-required，在需要验证多个内容时非常有用
  • ng-invalid-key 示例: ng-invalid-required

以下类被添加到表单或从表单中删除:

  • ng-pristine 尚未修改任何字段
  • ng-dirty 一个或多个字段已被修改
  • ng-valid 表单内容有效
  • ng-invalid 表单内容无效
  • ng-valid-key 每次验证一个键。示例：ng-valid-required，在需要验证多个内容时非常有用
  • ng-invalid-key 示例: ng-invalid-required

如果类所表示的值为 false，则会删除这些类。

为这些类添加样式，为应用程序提供更好、更直观的用户界面。

实例

使用标准 CSS 应用样式:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <style>
  5. input.ng-invalid {
  6.     background-color:pink;
  7. }
  8. input.ng-valid {
  9.     background-color:lightgreen;
  10. }
  11. </style>
  12. <body ng-app="">
  14. <p>尝试在输入字段中写入:</p>
  16. <form name="myForm">
  17. <input name="myName" ng-model="myName" required="">
  18. </form>
  20. <p>输入字段需要内容，因此在写入时将变为绿色。</p>
  22. </body>
  23. </html>
运行一下

表单也可以设置样式:

实例

将样式应用于未修改（原始）表单和已修改表单:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <style>
  5. form.ng-pristine {
  6.     background-color:lightblue;
  7. }
  8. form.ng-dirty {
  9.     background-color:pink;
  10. }
  11. </style>
  12. <body ng-app="">
  14. <form name="myForm">
  15. <p>尝试在输入字段中写入:</p>
  17. <input name="myName" ng-model="myName" required="">
  19. <p>当表单被修改时，表单会得到一个 "ng-dirty" 类，因此会变成粉红色。</p>
  20. </form>
  22. </body>
  23. </html>
运行一下

自定义验证

创建自己的验证函数有点棘手；您必须向应用程序中添加一个新指令，并在具有特定参数的函数中处理验证。

实例

创建自己的指令，其中包含一个自定义验证函数，并使用 my-directive 引用它。

仅当值包含字符 "e" 时，该字段才有效:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body ng-app="myApp">
  6. <p>尝试在输入字段中写入:</p>
  8. <form name="myForm">
  9. <input name="myInput" ng-model="myInput" required="" my-directive="">
  10. </form>
  12. <p>输入的有效状态为:</p>
  13. <h1>{{myForm.myInput.$valid}}</h1>
  15. <script>
  16. var app = angular.module('myApp', []);
  17. app.directive('myDirective', function() {
  18.     return {
  19.         require: 'ngModel',
  20.         link: function(scope, element, attr, mCtrl) {
  21.             function myValidation(value) {
  22.                 if (value.indexOf("e") > -1) {
  23.                     mCtrl.$setValidity('charE', true);
  24.                 } else {
  25.                     mCtrl.$setValidity('charE', false);
  26.                 }
  27.                 return value;
  28.             }
  29.             mCtrl.$parsers.push(myValidation);
  30.         }
  31.     };
  32. });
  33. </script>
  35. <p>输入字段必须包含要考虑有效的字符 "e"。</p>
  37. </body>
  38. </html>
运行一下
实例解释:

在 HTML 中，新指令将通过使用属性 my-directive 来引用。

在 JavaScript 中，我们首先添加一个名为 myDirective 的新指令。

请记住，在命名指令时，必须使用驼峰大小写名称 myDirective，但在调用它时，必须使用 - 分隔名称 my-directive。

然后，返回一个对象，指定我们需要 ngModel，即 ngModelController。

制作一个包含一些参数的链接函数，其中第四个参数 mCtrl 是 ngModelController，然后指定一个函数，在本例中名为 myValidation，它包含一个参数，该参数是输入元素的值。

测试值是否包含字母 "e"，并将模型控制器的有效性设置为 true 或 false。

最后, mCtrl.$parsers.push(myValidation); 把 myValidation 函数加入到其他函数的数组中, 每次输入值更改时都会执行。

验证实例

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <h2>验证实例</h2>
  8. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate="">
  10. <p>Username:<br>
  11. <input type="text" name="user" ng-model="user" required="">
  12. <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  13. <span ng-show="myForm.user.$error.required">Username is required.</span>
  14. </span>
  15. </p>
  17. <p>Email:<br>
  18. <input type="email" name="email" ng-model="email" required="">
  19. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  20. <span ng-show="myForm.email.$error.required">有效 Email</span>
  21. <span ng-show="myForm.email.$error.email">无效 Email 地址</span>
  22. </span>
  23. </p>
  25. <p>
  26. <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
  27. myForm.email.$dirty && myForm.email.$invalid">
  28. </p>
  30. </form>
  32. <script>
  33. var app = angular.module('myApp', []);
  34. app.controller('validateCtrl', function($scope) {
  35.     $scope.user = 'John Doe';
  36.     $scope.email = 'john.doe@gmail.com';
  37. });
  38. </script>
  40. </body>
  41. </html>
运行一下

HTML 表单属性 novalidate 用于禁用默认浏览器验证。

实例解释

AngularJS 指令 ng-model 将输入元素绑定到模型。

模型对象有两个属性: user 和 email.

由于 ng-show, 只有当用户或电子邮件为 $dirty 和 $invalid 时，才会显示颜色为红色的 sapns。

AngularJS 表单
AngularJS API

分类导航