本篇文章出自AngularJS基础教程
1. 简介
能够验证用户在表单中输入的内容是否合理与正确是十分重要的，而这个验证不能仅仅基于后端，因为对其中的内容实时反馈是很重要的，我们也必须在前端尽可能的保护后端。
AngularJS能够将HTML5表单验证同它自己的验证指令结合起来使用。
2.如何实时响应
AngularJS在处理表单时，会根据表单的状态自动添加一些CSS类。我们可以利用这些CSS类使用不同的样式提示用户表单目前的状态。
CSS类 何时自动添加 ng-pristine 表单没有做过修改时 ng-dirty 表单做过修改时 ng-valid 表单内容合法时 ng-invalid 表单内容非法时 AngularJS在处理表单时，会根据表单的状态为表单及表单下面的元素添加一些属性，这些属性反映出了表但目前的状态，我们可以在HTML代码中利用这些属性实时提示用户，也可以在JS代码中监听这些属性以便实时相应。我们可以使用formName.property和fromName.inputField.property分别访问到表单和表单下面的元素的属性。
属性名 类型 取值 $pristine 布尔型 未修改为true，否则为false。 $dirty 布尔型 修改过为true，否则为false。 $valid 布尔型 验证正确为true，否则为false。 $invalid 布尔型 验证错误为true，否则为true。
注意
对于表单本身来说，只有表单下面所有的有效元素（使用了ng-model的元素）的值都验证正确，才会为form元素添加ng-valid类，才会为formName对象的$valid属性设置为true，否则，就会添加ng-invalid以及设置$valide属性为false。表单是否修改也同理。
另外，我们无法获取到表单下的无效元素（没用ng-model的元素），因为我们没必要获取它们的状态。
下面的例子演示了在表单中有ng-model的有效元素和没有ng-model的无效元素的区别。
<body ng-app="myApp" ng-controller="myController">
<form name="myForm" novalidate>
<input type="text" placeholder="在此输入账号" ng-minlength="5" ng-maxlength="16" ng-model="a"/>
<br/><br/>
<input type="text" placeholder="在此输入密码" ng-minlength="5" ng-maxlength="16"/>
<br/><br/>
<button type="submit">Submit</button>
</form>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function () {
});
</script>
</body> 
3.验证选项
- 必填项
验证某个表单输入是否填写，只要在输入字段元素上添加HTML5标记required即可。
<form>
<input type="text" placeholder="在此输入" required/>
<button type="submit">Submit</button>
</form> 如果没有填写，点击了Submit按钮效果如下，这是由谷歌浏览器提供的默认验证，可以在form元素加上novalidate关键字禁用浏览器的默认验证，后面我们会讲怎么进行自定义验证。
- 长度限制
我们可以用ng-minlength和ng-maxlength指令来指定表单输入的最小长度和最大长度。
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
