AngularJS 输入验证

一、概述

• AngularJS 可以对表单和控件进行输入验证
• 验证状态由 AngularJS 自动维护，无需手动编写校验逻辑
• 常用验证属性包括：required、email、minlength、maxlength、pattern 等

---

二、表单验证状态属性

AngularJS 为每个表单和表单控件自动创建一组状态属性，可通过 formName.fieldName.$xxx 访问：

属性	说明
$valid	字段是否通过验证（true/false）
$invalid	字段是否未通过验证（true/false）
$pristine	用户是否尚未输入过（true/false）
$dirty	用户是否输入过（true/false）
$touched	字段是否失去过焦点（true/false）
$error	包含具体的验证错误信息（对象）

---

三、完整验证示例

<h2>Validation Example</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>Code language: HTML, XML (xml)

---

四、代码说明

1. 表单命名

<form name="myForm" novalidate>Code language: HTML, XML (xml)

• name="myForm"：给表单命名，之后可通过 myForm.xxx 访问表单状态
• novalidate：禁用浏览器默认的 HTML5 验证，使用 AngularJS 验证

2. 必填验证（required）

<input type="text" name="user" ng-model="user" required>Code language: HTML, XML (xml)

• required 表示该字段为必填项
• 未输入时 $error.required 为 true

3. 邮箱格式验证

<input type="email" name="email" ng-model="email" required>Code language: HTML, XML (xml)

• type="email" 自动启用邮箱格式校验
• 格式不正确时 $error.email 为 true

4. 错误提示的显示条件

ng-show="myForm.user.$dirty && myForm.user.$invalid"Code language: JavaScript (javascript)

只在用户输入过且未通过验证时才显示错误信息，避免页面一加载就出现红色提示。

5. 提交按钮禁用

ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
             myForm.email.$dirty && myForm.email.$invalid"Code language: PHP (php)

• 当任意字段被修改且验证未通过时，提交按钮不可用
• 所有字段验证通过后，按钮自动变为可用

---

五、常用验证类型汇总

验证类型	写法	$error 属性
必填	required	$error.required
邮箱格式	type="email"	$error.email
最小长度	ng-minlength="5"	$error.minlength
最大长度	ng-maxlength="10"	$error.maxlength
正则匹配	ng-pattern="/regex/"	$error.pattern
数字	type="number"	$error.number