本文主要介绍了AngularJS实现表单验证，客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可响应的现代HTML5表单，对AngularJS表单验证感兴趣的小伙伴们可以参考一下。
下面我们开始AngularJS表单验证：
常用的表单验证指令
1.必填项验证
某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
2.最小长度
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= “{number}”：
3.最大长度
4.模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
5.电子邮件
验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
6.数字
验证输入内容是否是数字，将input的类型设置为number：
7.URL
验证输入内容是否是URL，将input的类型设置为 url：
下面我们将这些表单验证放到具体的实现中来测试一下：(例子中的样式需引入bootstrapt.css)
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的验证与ng自有的验证进行了结合，如果浏览器不支持HTML5验证，那我们该如何解决？解决方案很简单，可以使用模式匹配的方式解决这几种情况，也可以自定义验证指令来复写或者重定义验证规则。
在表单元素上添加novalidate标记即可，问题是我们怎么知道我们的表单有哪些字段是有效的，那些事非法或者无效的？ng对此也提供了非常棒的解决方案，表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时响应。
可以使用formName.inputFieldName.property的格式访问这些属性。
未修改过的表单
布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过formName.inputFieldName.$pristine;
修改的表单
布尔型属性，当且仅当用户实际已经修改的表单。不管表单是否通过验证。
formName.inputFieldName.$dirty
经过验证的表单
布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，将为true：
formName.inputFieldName.$valid
未通过验证的表单:formName.inputFieldName.$invalid
最后两个属性在用于DOM元素的显示或隐藏时是特别有用的。同时，如果要设置特定的class时，他们也非常有用的。
另外，AngularJS提供的另外一个非常有用的属性：$error对象。它包含当前表单的所有验证内容，以及它们是否合法的信息。用下面的语法访问这个属性：formName.inputfieldName.$error
如果验证失败，这个属性的值为true；如果值为空，则说明输入字段的值通过了验证。
下面我们对这些验证指令进行测试：
Index
1.必填项:{{user.name}}
$pristine 【没修改】：{{myForm.name.$pristine }}
$dirty【修改过】：{{myForm.name.$dirty}}
$invalid【验证失败】：{{myForm.name.$invalid}}
$invalid【验证成功】：{{myForm.name.$valid}}
required：{{myForm.name.$error.required}}
2.最小长度=5:{{user.minlength}}
$pristine 【没修改】：{{myForm.minlength.$pristine }}
$dirty【修改过】：{{myForm.minlength.$dirty}}
$invalid【验证失败】：{{myForm.minlength.$invalid}}
$invalid【验证成功】：{{myForm.minlength.$valid}}
$error【错误详情】：{{myForm.minlength.$error}}
3.最大长度=20:{{user.maxlength}}
$pristine 【没修改】：{{myForm.maxlength.$pristine }}
$dirty【修改过】：{{myForm.maxlength.$dirty}}
$invalid【验证失败】：{{myForm.maxlength.$invalid}}
$invalid【验证成功】：{{myForm.maxlength.$valid}}
$error【错误详情】：{{myForm.maxlength.$error}}
4.模式匹配:{{user.pattern}}
$pristine 【没修改】：{{myForm.pattern.$pristine }}
$dirty【修改过】：{{myForm.pattern.$dirty}}
$invalid【验证失败】：{{myForm.pattern.$invalid}}
$invalid【验证成功】：{{myForm.pattern.$valid}}
$error【错误详情】：{{myForm.pattern.$error}}
5.电子邮件:{{user.email}}
$pristine 【没修改】：{{myForm.email.$pristine }}
$dirty【修改过】：{{myForm.email.$dirty}}
$invalid【验证失败】：{{myForm.email.$invalid}}
$invalid【验证成功】：{{myForm.email.$valid}}
$error【错误详情】：{{myForm.email.$error}}
6.数字:{{user.age}}
$pristine 【没修改】：{{myForm.age.$pristine }}
$dirty【修改过】：{{myForm.age.$dirty}}
$invalid【验证失败】：{{myForm.age.$invalid}}
$invalid【验证成功】：{{myForm.age.$valid}}
$error【错误详情】：{{myForm.age.$error}}
7.URL:{{user.url}}
$pristine 【没修改】：{{myForm.url.$pristine }}
$dirty【修改过】：{{myForm.url.$dirty}}
$invalid【验证失败】：{{myForm.url.$invalid}}
$invalid【验证成功】：{{myForm.url.$valid}}
$error【错误详情】：{{myForm.url.$error}}
如有错误请大家指正，谢谢！
最后欢迎大家加入前端交流学习群，我会不定期与大家分享个人前端学习心得。
