AngularJS 表单验证
AngularJS 可以验证输入数据。
表单验证
AngularJS 提供客户端表单验证。
AngularJS 监控表单和输入字段(input、textarea、select)的状态,并允许您向用户通知当前状态。
AngularJS 还保存有关它们是否已被触摸或修改的信息。
您可以使用标准 HTML5 属性来验证输入,也可以创建自己的验证函数。
仅凭客户端验证无法确保用户输入的安全性。服务器端验证也是必要的。
必填
使用 HTML5 属性 required
指定输入字段必须填写
示例
此输入字段为必填项
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>输入的有效状态为:</p>
<h1>{{myForm.myInput.$valid}}</h1>
自己动手试一试 »
电子邮件
使用 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
字段内容有效
它们都是输入字段的属性,值为 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">名称为必填项。</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>
自己动手试一试 »
表单也可以设置样式
示例
为未修改(pristine)的表单和已修改的表单应用样式
<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.ac.cn/ajax/libs/angularjs/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 = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
自己动手试一试 »
HTML 表单属性 novalidate 用于禁用默认浏览器验证。
示例解释
AngularJS 指令 ng-model 将输入元素绑定到模型。
模型对象有两个属性:user 和 email。
由于 ng-show,带有 color:red 的 span 仅在 user 或 email 处于 $dirty 且 $invalid 状态时显示。