angularjs 表单校验指令_详解AngularJS实现表单验证

开始学习AngularJS表单验证：

常用的表单验证指令1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

<

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

<

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<

5. 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

6. 数字

验证输入内容是否是数字，将input的类型设置为number：

<

7. URL

验证输入内容是否是URL，将input的类型设置为 url：

<

下面我们将这些表单验证放到具体的实现中来测试一下：

1.必填项

2.最小长度=5

3.最大长度=20

4. 模式匹配

5. 电子邮件

6. 数字

7. URL

1.必填项:{ {user.name}}

2.最小长度=5:{ {user.minlength}}

3.最大长度=20:{ {user.maxlength}}

4.模式匹配:{ {user.pattern}}

5.电子邮件:{ {user.email}}

6.数字:{ {user.age}}

7.URL:{ {user.url}}

在测试中我们发现，只有当表达式满足验证，才会实时进行双向绑定。同时我们也发现，效果图如下：

似乎并没有发生什么问题，但是如果我们将其移植到一个队HTML5验证不怎么好的浏览器再来测试一下【本例IE9】，问题来了，某些字段完全没得验证

其实，上面的例子，我们利用了HTML5的验证与ng自有的验证进行了结合，不支持HTML5验证，但ng自由验证运行良好。解决方案很简单，可以使用模式匹配的方式解决这几种情况，也可以自定义验证指令来复写或者重定义验证规则。

屏蔽浏览器对表单的默认验证行为在表单元素上添加novalidate标记即可，问题是我们怎么知道我们的表单有哪些字段是有效的，那些事非法或者无效的？ng对此也提供了非常棒的解决方案，表单的属性可以在其所属的$scope对象中访问