以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值。

相关文章