AngularJS 表单验证

AngularJS 能够验证输入数据。

表单验证

AngularJS 提供客户端表单验证。

AngularJS 监控表单和输入字段（input、textarea、select）的状态，并允许您向用户通知当前状态。

AngularJS 还包含有关它们是否已被触摸或修改的信息。

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

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

required

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

实例

此输入字段是必填的：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
  
<p>输入的有效状态是：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

亲自试一试

email

使用 HTML5 类型 email 指定该值必须是电子邮件：

实例

此输入字段必须是电子邮件：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
  
<p>输入的有效状态是：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

亲自试一试

表单状态和输入状态

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

输入字段有以下状态：

  • $untouched 该字段尚未被触摸
  • $touched 该字段已被触摸
  • $pristine 该字段尚未被修改
  • $dirty 该字段已被修改
  • $invalid 字段内容无效
  • $valid 字段内容有效

它们都是输入字段的属性，要么为真，要么为假。

表单有以下状态：

  • $pristine 尚未修改任何字段
  • $dirty 个或多个字段已被修改
  • $invalid 表单内容无效
  • $valid 表单内容有效
  • $subscribed 表单已被提交

它们都是表单的属性，可以为真或假。

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

实例

如果该字段已被触摸且为空，则显示错误消息：

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名称是必填项。</span>

亲自试一试

CSS 类

AngularJS 根据表单和输入字段的状态向它们添加 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 应用样式：

<style>
input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}
</style>

亲自试一试

也可以设置表单的样式。

实例

为未修改的（原始的）表单和已修改的表单应用样式：

<style>
form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}
</style>

亲自试一试

自定义验证

创建一个自己的验证函数需要一些技巧；您必须向应用程序添加新指令，并使用某些指定参数处理函数内部的验证。

实例

创建您自己的指令，包含自定义验证函数，并通过使用 my-directive 引用它。

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

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>

亲自试一试

Example Explained:

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

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

记住，当命名一个指令时，你必须使用驼峰式命名法，如 myDirective，但调用它时，你必须使用连字符分隔的名称，如 my-directive。

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

创建一个链接函数，它接受一些参数，其中第四个参数 mCtrl 是 ngModelController。

然后指定一个函数，在本例中名为 myValidation，它接受一个参数，该参数是输入元素的值。

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

最后，mCtrl.$parsers.push(myValidation); 会将 myValidation 函数添加到其他函数的数组中，这些函数将在每次输入值更改时执行。

验证示例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>

<h2>验证示例</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>

</body>
</html>

亲自试一试

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

例子解释：

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

模型对象有两个属性：user 和 email。

由于 ng-show，只有当 user 或 email 为 $dirty 和 $invalid 时，才会显示带有 color:red 的 spans。