AngularJS在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值。

相关文章