AngularJS 输入验证
AngularJS 提供了一套强大的机制，用于验证表单输入。通过使用内置指令，你可以轻松地实现字段验证、显示错误消息以及控制提交按钮的启用/禁用等。
1. 常见的内置验证指令
AngularJS 提供了多种内置指令来验证表单元素：
required: 验证字段是否为空。email: 验证输入是否为有效的电子邮件格式。url: 验证输入是否为有效的 URL 格式。minlength: 验证输入是否符合最小长度要求。maxlength: 验证输入是否符合最大长度要求。pattern: 使用正则表达式验证输入是否符合自定义规则。
这些指令可以直接添加到 HTML 表单控件中，当输入不符合验证规则时，AngularJS 会自动更新表单控件的状态。
2. 示例：常见的输入验证
以下是一个简单的表单示例，展示了如何使用 AngularJS 的内置验证指令来验证用户输入：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 输入验证示例</title>
</head>
<body ng-controller="formController">
<h1>注册表单</h1>
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<!-- 用户名 -->
<label for="username">用户名：</label>
<input type="text" id="username" ng-model="user.username" required />
<span ng-show="registrationForm.username.$touched && registrationForm.username.$invalid">用户名是必填项！</span>
<br />
<!-- 电子邮件 -->
<label for="email">电子邮件：</label>
<input type="email" id="email" ng-model="user.email" required />
<span ng-show="registrationForm.email.$touched && registrationForm.email.$invalid">请输入有效的电子邮件地址！</span>
<br />
<!-- 密码 -->
<label for="password">密码：</label>
<input type="password" id="password" ng-model="user.password" required minlength="6" />
<span ng-show="registrationForm.password.$touched && registrationForm.password.$invalid">密码必须至少为 6 个字符！</span>
<br />
<!-- 提交按钮 -->
<button type="submit" ng-disabled="registrationForm.$invalid">提交</button>
</form>
<h2>表单数据：</h2>
<pre>{{ user }}</pre>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('formController', function($scope) {
$scope.user = {};
$scope.submitForm = function() {
if ($scope.registrationForm.$valid) {
alert("表单提交成功！");
} else {
alert("表单验证失败！");
}
};
});
</script>
</body>
</html>
说明：
ng-model="user.username"：将输入框与$scope.user.username数据模型绑定。required：用于验证该字段是否为必填项。minlength="6"：用于验证密码是否至少为 6 个字符。ng-show="registrationForm.username.$touched && registrationForm.username.$invalid"：当表单字段被触摸且无效时显示错误消息。ng-disabled="registrationForm.$invalid"：当表单无效时禁用提交按钮。
3. 表单状态
AngularJS 为每个表单元素提供了一些内置属性，可以帮助我们检查该元素的状态。这些属性可以用于显示表单验证的错误消息或控制提交按钮。
常见的表单状态属性：
$valid：当表单有效时为true，否则为false。$invalid：当表单无效时为true，否则为false。$dirty：当表单字段值发生变化时为true，否则为false。$pristine：当表单字段未被修改时为true，否则为false。$touched：当表单字段获得焦点并离开时为true，否则为false。$untouched：当表单字段未被触摸时为true，否则为false。
这些属性可以在验证错误消息或控制按钮启用状态时使用。
示例：显示表单验证状态
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 表单状态验证</title>
</head>
<body ng-controller="formController">
<h1>用户注册</h1>
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<label for="username">用户名：</label>
<input type="text" id="username" ng-model="user.username" required />
<span ng-show="registrationForm.username.$touched && registrationForm.username.$invalid">用户名是必填项！</span>
<br />
<label for="email">电子邮件：</label>
<input type="email" id="email" ng-model="user.email" required />
<span ng-show="registrationForm.email.$touched && registrationForm.email.$invalid">请输入有效的电子邮件地址！</span>
<br />
<button type="submit" ng-disabled="registrationForm.$invalid">提交</button>
</form>
<h2>表单状态：</h2>
<pre>{{ registrationForm.$valid }}</pre>
<pre>{{ registrationForm.$invalid }}</pre>
<pre>{{ registrationForm.username.$dirty }}</pre>
<pre>{{ registrationForm.email.$touched }}</pre>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('formController', function($scope) {
$scope.user = {};
$scope.submitForm = function() {
if ($scope.registrationForm.$valid) {
alert("表单提交成功！");
} else {
alert("表单验证失败！");
}
};
});
</script>
</body>
</html>
说明：
- 在此示例中，
registrationForm.$valid和registrationForm.$invalid将显示表单的有效性状态。 registrationForm.username.$dirty和registrationForm.email.$touched用于检查表单字段的状态。
4. 自定义验证
除了内置验证，AngularJS 还允许你创建自定义验证规则。例如，你可以使用 ng-pattern 来验证输入字段是否符合正则表达式要求，或者使用 ng-model 与自定义函数结合进行复杂验证。
示例：自定义验证（正则表达式）
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 自定义验证示例</title>
</head>
<body ng-controller="formController">
<h1>密码验证</h1>
<form name="passwordForm" ng-submit="submitForm()">
<label for="password">密码：</label>
<input type="password" id="password" ng-model="user.password" ng-pattern="/^[a-zA-Z0-9]{6,12}$/" required />
<span ng-show="passwordForm.password.$touched && passwordForm.password.$invalid">密码必须为 6-12 位字母或数字！</span>
<br />
<button type="submit" ng-disabled="passwordForm.$invalid">提交</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('formController', function($scope) {
$scope.user = {};
$scope.submitForm = function() {
if ($scope.passwordForm.$valid) {
alert("表单提交成功！");
} else {
alert("表单验证失败！");
}
};
});
</script>
</body>
</html>
说明：
ng-pattern="/^[a-zA-Z0-9]{6,12}$/"用于验证密码是否为 6-12 位字母或数字。- 当输入的密码不符合该模式时，会显示错误消息。
5. 总结
- AngularJS 提供了强大的输入验证功能，通过内置的指令如
required、email、minlength、maxlength、pattern等可以简化验证逻辑。 - 可以使用表单控制器属性（如
$valid、$invalid、$dirty、$touched）来检查表单和表单字段的状态。 - 自定义验证可以通过
ng-pattern或结合 AngularJS 的自定义函数来实现复杂的验证规则。
通过这些验证机制，AngularJS 提供了灵活而强大的表单处理能力，帮助开发者快速构建复杂的验证逻辑。
发表回复