AngularJS 表单验证

AngularJS 可以验证输入数据。


表单验证

AngularJS 提供客户端表单验证。

AngularJS 监视表单和输入字段(输入、文本区域、选择)的状态,并让您通知用户当前状态。

AngularJS 还保存有关它们是否被触摸或修改过的信息。

您可以使用标准 HTML5 属性来验证输入,也可以制作自己的验证函数。

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


Required

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

实例

输入栏为必填项:

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

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
亲自试一试 »

E-mail

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

实例

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

<form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
亲自试一试 »


表单状态和输入状态

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

输入字段有以下状态:

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

它们都是输入字段的属性,要么是true,要么是false

表单具有以下状态:

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

它们都是表单的属性,要么是true,要么是false

您可以使用这些状态向用户显示有意义的消息。例如,如果一个字段是必需的,而用户将其留空,您应该给用户一个警告:

实例

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

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
亲自试一试 »

CSS 类

AngularJS 根据状态向表单和输入字段添加 CSS 类。

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

  • ng-untouched该字段尚未被触及
  • ng-touched 字段已被触摸
  • ng-pristine该字段没有被 尚未修改
  • ng-dirty字段已修改
  • ng-valid字段内容有效
  • ng-invalid字段内容无效
  • ng-valid-key 每个验证一个 key。 示例:ng-valid-required,当有多个必须验证的东西时很有用
  • ng-invalid-key 示例:ng-invalid-required

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

  • ng-pristine 没有字段尚未修改
  • ng-dirty一个或多个字段被修改
  • ng-valid 表单内容有效
  • ng-invalid 表单内容无效
  • ng-valid-key 每个验证一个 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>
亲自试一试 »

实例解析:

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

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

请记住,在命名指令时,必须使用驼峰式名称,myDirective,但在调用它时,必须使用 - 分隔名称,my-directive

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

创建一个带有一些参数的链接函数,其中第四个参数 mCtrlngModelController

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

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

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


Validation 实例

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

<h2>Validation Example</h2>

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

<p>Username:<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">Username is required.</span>
  </span>
</p>

<p>Email:<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">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</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 = 'john.doe@gmail.com';
});
</script>

</body>
</html>
亲自试一试 »

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

实例解析

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

模型对象有两个属性:useremail

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