AngularJS 表单验证
AngularJS 可以验证输入数据。
表单验证
AngularJS 提供客户端表单验证。
AngularJS 监视表单和输入字段（输入、文本区域、选择）的状态，并让您通知用户当前状态。
AngularJS 还保存有关它们是否已被触及、修改的信息。
您可以使用标准 HTML5 属性来验证输入，也可以创建自己的验证函数。
客户端验证不能单独保护用户输入。服务器端验证也是必要的。
必需的
使用 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>
亲自试一试 »
电子邮件
使用 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一钥匙对于每个验证。例子：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>
亲自试一试 »
示例解释：
在 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://ajax.googleapis.com/ajax/libs/angularjs/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 表单属性不验证用于禁用默认浏览器验证。
示例解释
AngularJS 指令ng-模型将输入元素绑定到模型。
模型对象有两个属性：用户和电子邮件。
因为ng-show，颜色为红色的跨度仅在用户或电子邮件被显示时显示$脏和$无效。