Angular Form Validation

常用的表单验证指令

必填项验证

判断输入表单是否已经填写，只需要在输入字段上添加HTML5标记required即可:

<input type="text" required />

还有一个ng-required可以控制该项是否是必填的

<input type="text" ng-required="true" />

最小值

验证表单的输入的数值是否大于某一个最小值，在输入字段上用指令min="{number}":

<input type="number" ng-model="user.score" min="10" />

最大值

验证表单的输入值是否小于等于某一个最大值，在输入字段上用指令max="{number}":

<input type="number" ng-model="user.score" max="100" />

最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minlength="{number}":

<input type="text" ng-minlength="5" />

最大长度验证

验证表单输入的文本长度是否小于或者等于某个最大值，在输入字段上使用指令ng-maxlength="{number}":

<input type="text" ng-maxlength="20" />

模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:

<input type="text" ng-pattern="/[a-zA-Z]/" />

电子邮件

验证输入内容是否是电子邮件，只要将input的类型设置为email即可:

<input type="email"  name="email" ng-model="user.email" />

数字

验证输入内容是否是数字，将input的类型设置为number:

<input type="number" name="age" ng-model="user.age" />

URL

验证输入内容是否是URL，将input的类型设置为url:

<input type="url" name="homepage" ng-model="user.homepage" />

出错时angular添加的class

表单状态	应用的CSS
$invalid	ng-invalid
$valid	ng-valid
$pristine	ng-pristine
$dirty	ng-dirty

指令	应用的CSS
required或者ng-required	ng-valid-required或者ng-invalid-required
min	ng-valid-min或ng-invalid-min
max	ng-valid-max或ng-invalid-max
ng-pattern	ng-valid-pattern或ng-invalid-pattern
type="url"	ng-valid-url或ng-invalid-url
type="email"	ng-valid-email或ng-invalid-email
type="date"	ng-valid-date或ng-invalid-date
type="number"	ng-valid-number或ng-invalid-number

禁用HTML5默认的表单验证

在form上添加novalidate属性，就可以禁用HTML5自带的验证

获取表单中各个field的状态

未修改过的field

布尔值属性，表示用户是否修改了该字段。如果为true，表示没有修改过；false表示修改过:

formName.inputFieldName.$pristine;

修改过的field

布尔型属性，当且仅当用户实际已经修改过的字段。不管字段是否有效:

formName.inputFieldName.$dirty;

经过验证的字段

布尔型属性，它指字段是否通过验证。如果通过，它将为true:

formName.inputFieldName.$valid

未通过验证的表单

formName.inputFieldName.$invalid

何时可以在$scope中取到表单中各个字段的状态

angular的验证是由form指令和ngModel协调完成的。当验证控件没有name属性的时是不会被form捕获的。下面让我们从angular的源码中看起:

首先是ngModel:

var ngModelDirective = function() {
     return {
       require: ['ngModel', '^?form'],
       controller: NgModelController,
       link: function(scope, element, attr, ctrls) {
         // notify others, especially parent forms
 
         var modelCtrl = ctrls[0],
             formCtrl = ctrls[1] || nullFormCtrl;
 
         formCtrl.$addControl(modelCtrl);
 
         scope.$on('$destroy', function() {
           formCtrl.$removeControl(modelCtrl);
         });
       }
     };
   };

从上面我们可以看出来ngModel指令会在编译时期的post link阶段会通过form的addControl方法把自己的controller注册到父节点的form的formController中。再看看ngModelController初始化代码:

var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', 
  function($scope, $exceptionHandler, $attr, $element, $parse) { 
    ....
   this.$pristine = true; 
   this.$dirty = false; 
   this.$valid = true; 
   this.$invalid = false; 
   this.$name = $attr.name;

从上面我们可以看到ngModel的$name属性并不支持表达式计算。而FormController的addControl代码则是:

/**
     * @ngdoc function
     * @name ng.directive:form.FormController#$addControl
     * @methodOf ng.directive:form.FormController
     *
     * @description
     * Register a control with the form.
     *
     * Input elements using ngModelController do this automatically when they are linked.
     */
    form.$addControl = function(control) {
      // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
      // and not added to the scope.  Now we throw an error.
      assertNotHasOwnProperty(control.$name, 'input');
      controls.push(control);

      if (control.$name) {
        form[control.$name] = control;
      }
    };

从上面我们可以清楚的看见虽然ngModel注册了自己，但是这里也不一定能注册成功，ngModel必须有自己的$name才能被注册成功。