脚本宝典收集整理的这篇文章主要介绍了angular表单验证，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
初识Angular
使用angular至今已经一年有余。从当初的不理解它的运行模式到现在的熟练使用，其中的曲折也就不再多说了。
写这篇文章的目的呢，是为了自己总结也让喜欢angular的同学对表单验证这块有个了解。
angular的重点难点
在angular里面比较关键的也是比较难理解的几个点是。
1：指令
2：服务
对于这两个点的话。如果有时间的话我也会写一篇内容来说明下。但之前看到有同学已经写过了这方面的内容，而且解释的挺清楚。所以在这也就不再重复了。详情参见[AngularJs学习笔记-第一章-指令(1)](http://segmentfault.COM/a/1190000002988243)，本文的重点也不在这里。之说以要说这个是因为在后面的内容里会涉及一些指令和服务。对于指令服务不清楚的同学请查看[官方文档的说明]。(http://docs.angularjs.cn/api/ng/directive)（查看官方文档需要翻墙这里给出angular中文社区里面的文档）。
angular表单验证
在日常开发中我们表单验证是我们必须面对的问题之前。在使用angular之前，做表单验证的话一般自己来封装一些公用的js库，或者使用jquery.validate这样的第三方库来实现。那么在angular里是如果做表单验证的呢？
angular的表单验证，能够将H5表单验证的功能和自己的验证指令结合起来进行使用，并且非常方便。
在angular中提供了很多表单验证的指令，我会介绍其中最常用也最核心的几个。讲完这些后我会介绍下如何创建自定义的验证指令。
<form name="form" novaildate>
<label name="email">你的邮箱</label>
<input type="email" name="email" ng-model="email" placeholder="输入邮箱"/>
</form>如果要使用angular的表单验证，首先要确保表单必须要有一个name的属性
所有的输入字段都可以进行基本验证，比如最大，最小长度等。这些功能都由H5的表单属性提供，如果想要屏蔽浏览器对于表单默认的验证行为，可以在表单上添加novaildate的标记。
1.必填项
验证表单输入是否已经添加 之前在dom元素上加上required标记即可
<input type="text" required/>
2.最小长度
验证表单输入的文本是否大于某个最小值，可以在输入的字段上使用指令 ng-minlength="{number}"
<input type="text" ng-minlength="5"/>
验证表单输入的文本是否大于或者等于某个最大值，可以使用指定ng-maxlength="{number}"
<input type="text" ng-maxlength="5"/>4.匹配模式
使用ng-pattern="/PATTERN/"来确保输入能匹配指定的正则表达式
<input type="text" ng-pattern="[a-zA-Z]"/>5.电子邮件
验证输入的文本是否是电子邮箱可以使用 type=email来实现
<input type="email" name="email" ng-model="user.email" />6.是否数字
验证输入的文本是否是为数字可以使用 type=number来实现
<input type="number" name="age" ng-model="user.age" />7.URL
验证输入的文本是否是为url可以使用 type=url来实现
<input type="url" name="homepage" ng-model="user.homepage" />8.表单属性
以上就是常用的一些内置的指令，关于自定义的指令，我会在后面的文章里来说明。下面继续说下在表单验证中的控制变量。
表单的属性可以在所在作用域的$scope对象中访问到，而我们又可以访问$scope对象因为JavaScript可以间接地访问dom中的表单属性借助这些属性，我们可以对表单做出实时的响应（双向绑定）这些属性包括下面这些.（可以通过formName.inputfieldName.PRoperty这种格式来访问这些属性）
1:未修改的表单
这是一个布尔类型的属性，用来判断用户是否修改了表单，如果未修改，值为true否则为false
formName.inputfieldName.$pristine
2:修改过的表单
只要用户修改过表单无论输入是否验证通过都返回true
formName.inputfieldName.$dirty
3:合法的表单
这个布尔属性用来判断表单的内容是否不合法，如果当前的表单内容是合法的。该属性就返回为true
formName.inputfieldName.$valid
4：不合法的表单
这个布尔属性用来判断表单的内容是否不合法，如果当前的表单内容是不合法的，该属性就返回为true
formName.inputfieldName.$invalid
5：错误
这是angular提交的另一个非常有用的属性：$error对象，她包含当前表单所有的验证内容。以及它们是否合法的信息，可以这样来访问formName.inputfieldName.$error,如果验证失败这个属性值为true，如果值为false说明通过了验证。
关于错误提示的一些样式
angular处理表单时，会根据表单当前的状态添加一些css样式，包括验证失败，验证成功等等，这些样式和之前的属性也类型。如下
.ng-pristine{}
.ng-dirty{}
.ng-valid{}
.ng-invalid{}
这个样式对于这个不同的表单状态比如当输入的字段非法时，.ng-invlid这个样式会被加到这个字段上。这样我们就可以根据自己的需求，来更改这些样式。 话说了这多。代码怎么写呢下面呢，我来通过一个表单注册的例子来整体回顾下上面的内容