在AngularJS中实现自定义表单验证

标签：

除了一些已经定义好了的验证（例如 必填项、最小长度、最大长度）之外，更常用的，还是需要我们自己定义表单验证，这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案。

1. 在表单中控制变量

   表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时响应。可以使用下面这样的格式来访问这些属性：

   formName.inputFileldName.property

   未修改的表单 formName.inputFieldName.$pristine

   修改过的表单 formName.inputFiledName.$dirty

   合法表单 formName.inputFieldName.$valid

   不合法表单 formName.inputFieldName.$invalid

   错误 formName.inputfieldName.$error????如果验证失败，该值为true，如果验证通过，该值为false

   一些有用的CSS样式

   AngularJS处理表单时，会根据表单当前的状态添加一些CSS类，这些CSS类名称比较类似与相应的属性：

   .ng-pristine{}

   .ng-dirty{}

   .ng-valid{}

   .ng-invalid{}

   它们对应着表单输入字段的特定状态，当某个字段输入非法时，ng-invalid类会被添加到这个字段上。

2、尽管实时验证有时候非常必要，但是如果在用户还没有结束输入就提醒出错，是非常糟糕的用户体验，解决的办法有两个，第一，在提交表单的时候验证；第二，在input失去焦点时进行验证。

在AngularJS中实现自定义表单验证

标签：

原文地址：http://www.cnblogs.com/1000px/p/4661002.html