validator相关的指令

概述

数据输入有效性校验相关的指令一共有四个，实际是八个（每一个指令都有一个ng开头的同名指令）：

指令	说明
required，ng-required	必须有输入
pattern，ng-pattern	正则或函数进行校验
minlength，ng-minlength	最小长度控制
maxlength，ng-maxlength	最大长度控制

这个指令必须依赖ng-model，如果没有设置ng-model，就不会有任何动作。

实现细节

四个指令的实现细节基本上是一模一样的：
1、设置controller的校验回调函数。
2、监控对应的属性，如果数据发生变化，就调用model controller的$validate进行有效性校验。
以required为例：

ctrl.$validators.required = function(modelValue, viewValue) {
  return !attr.required || !ctrl.$isEmpty(viewValue);
};

attr.$observe('required', function() {
  ctrl.$validate();
});

指令	回调函数名称
required，ng-required	$validators.required
pattern,ng-pattern	$validators.pattern
maxlength,ng-maxlength	$validators.maxlength
minlength,ng-minlength	$validators.minlength

四个指令对应的校验回调：

指令	回调函数名称
required，ng-required	$validators.required
pattern,ng-pattern	$validators.pattern
maxlength,ng-maxlength	$validators.maxlength
minlength,ng-minlength	$validators.minlength

这些回调会在ng-model中调用：

function processSyncValidators() {
  var syncValidatorsValid = true;
  forEach(ctrl.$validators, function(validator, name) {
    var result = validator(modelValue, viewValue);
    syncValidatorsValid = syncValidatorsValid && result;
    setValidity(name, result);
  });
  if (!syncValidatorsValid) {
    forEach(ctrl.$asyncValidators, function(v, name) {
      setValidity(name, null);
    });
    return false;
  }
  return true;
}

从中可以看出，当需要添加或值修改ng-model的校验方式时，只需要修改$validators的属性就可以了。

样例代码

    


     

         

             Toggle required: 
             
             

             This input must be filled if `required` is true: 
             

             

             required error set? = {{form.input.$error.required}}

             model = {{model}}
         
         

这段代码实现了一个控制输入框的required属性的功能，可以看到required属性为treu和false时输入框为空时的数据变化。