AngularJS 表单验证
AngularJS 表单验证，AngularJS 在客户端执行表单验证。AngularJS 监听表单和输入字段（输入、文本区域、选择）的状态，并通知用户当前状态。AngularJS 还保存有关输入字段是否已被触摸、修改或未修改的信息。
表单输入具有以下状态：
- $untouched：表示该字段还没有被触及。
- $touched：表示该字段已被触摸。
- $pristine：表示该字段还没有被修改。
- $dirty：说明该字段已被修改。
- $invalid：表示字段内容无效。
- $valid：指定字段内容有效。
这些都是输入字段的属性，可以是true或false。
表单具有以下状态：
- $pristine：表示字段还没有被修改。
- $dirty：说明一个或多个字段被修改。
- $invalid：表示表单内容无效。
- $valid：表示表单内容有效。
- $submitted：它指定表单已提交。这些都是表单的属性，可以为true或false。
此状态可用于向用户输入的非法数据进行警告。示例 1：
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="">
<form name="form1">
<p>Name:
<input name="username" ng-model="username" required>
<span ng-show="form1.username.$pristine && form1.username.$invalid">
The name is required.</span>
</p>
<p>Address:
<input name="useraddress" ng-model="useraddress" required>
</p>
</form>
<p>We use the ng-show directive to only
show the error message if the field has
not modified yet AND content present in
the field is invalid.</p>
</body>
</html>输出：
自定义表单验证：要创建您自己的验证函数，请向您的应用程序添加一个新指令，并使用某些指定参数处理函数内部的验证。
示例 2：创建自定义验证函数，该字段仅在值大于或等于 18 时才有效。
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="developapp">
<form name="form1">
Username:
<input name="username" required><br><br>
Age:
<input name="userage" ng-model="userage" required app-directive>
</form>
<p>The input's valid state is:</p>
<h1>{{form1.userage.$valid}}</h1>
<script>
var app = angular.module('developapp', []);
app.directive('appDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value >=18) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
<p>The input field must have
user age greater than 18 to be
considered valid for voting.</p>
</body>
</html>输出：
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
