在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失去焦点时进行验证。
3. Tips：不要忘记给输入字段添加name属性。给输入字段添加name属性非常重要：这决定了我们将验证信息展示给用户时如何引用表单输入字段。
4. 用$dirty属性来确保用户未对输入内容进行修改时错误内容不会显示出来：
5. AngularJS表单验证总结
   1. AngularJS表单验证规则
      1. required 必填项
      2. type="number" 必须为数字
      3. type="email" 必须为邮箱
      4. ng-max 最大值
      5. ng-min 最小值
      6. ng-max-length 最大长度
      7. ng-min-length 最小长度
      8. ng-pattern 正则验证
      9. 等等
   2. AngularJS默认验证是实时的，通过修改ng-invalid ng-valid ng-dirty     三个样式达到验证提示的目的。
   3. AngularJS验证的缺点
      1. 提示信息是实时显示的，有时候我们更想通过表单触发验证
      2. 写验证提示需要写大量模板
6. ng-class 用来控制class的值，例如ng-class="{'has-success':! formName.inputName.$pristine}"的意思就是如果! formName.inputName.$pristine的值为true，class的值就是has-success.
7. ng-show:控制是否显示该控件
8. formName.$valid 表单全部验证通过后，值为true，否则为false
9. formName.inputName.$valid 标识为inputName控件是否通过验证，通过为true
10. formName.inputName.$pristine 标识inputName控件是否从未输入过，从未输入为true值。