Page 51 - AngularJS权威教程

7.2 表单验证 31

<input type="number" name="age" ng-model="user.age" />
1
7. URL

验证输入内容是否是URL，将input的类型设置为 url： 2
<input type="url" name="homepage" ng-model="user.facebook_url" />
3
8. 自定义验证
在AngularJS中自定义指令是非常容易的。鉴于目前还没有介绍到指令的相关内容，第10章
4
再深入研究如何创建自定义验证。目前先来看一下如何通过向后端服务器发送请求，并通过响应
的结果来将输入字段设置为合法或不合法，以确保输入字段中的内容是唯一的。
5
9. 在表单中控制变量

表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此
JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时（和 6
AngularJS中其他东西一样）响应。这些属性包括下面这些。
7
（注意，可以使用下面的格式访问这些属性。）

formName.inputFieldName.property
8
 未修改的表单
这是一个布尔属性，用来判断用户是否修改了表单。如果未修改，值为true，如果修改过值 9
为false：

formName.inputFieldName.$pristine 10
 修改过的表单

只要用户修改过表单，无论输入是否通过验证，该值都返回true： 11

formName.inputFieldName.$dirty
12
 合法的表单
这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的，下面属性的 13
值就是true：

formName.inputFieldName.$valid
14
 不合法的表单

这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的，下面属性的 15
值为true：
formName.inputFieldName.$invalid 16
 错误
17
这是AngularJS提供的另外一个非常有用的属性：$error对象。它包含当前表单的所有验证
内容，以及它们是否合法的信息。用下面的语法访问这个属性：
18
formName.inputfieldName.$error