angularJS表单验证ng-form

1. ng-form
   ng-form是Angular提供的directive。ng-form指令为form增补了一些额外特性。 它会控制那些带有ng-model指令和name属性的元素，监听他们的属性（包括其有效性）。

<ng-form name="demoForm">

    <input name=“name” type="text" required ng-model=“name”/>
    <input name=“password” type="text" minlength=“8” ng-model=“password”/>

    <button ng-disabled="demoForm.$invalid">Save</button>

</ng-form>

ng-form指令实例化了名为”demoForm”的表单控制器(formcontroller)并且插入到当前的$scope中。每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着INVALID状态）或者null（对应着VALID状态）。它还有自己的valid属性，这个属性只有在它包含的每个控件都有效时才是真。

2.1 ng-form表单校验实现原理
1）通过ng-model指令跟踪修改状态与有效性验证，
状态：控件被访问过（ng-touched、ng-untouched）
控件的值变化了（ng-dirty、ng-pristine）
控件的值有效（ng-valid、ng-invalid）
有效性：通过将验证器（validator）添加到表单控件上、一旦控件发生变化Angular就会调用验证器
2）表单中控件的formcontroller实例(持有ng-model属性)会将自身注册到ng-form指令的formcontroller上，控件的name属性作为注册的键值；

2.2 ng-model与验证器
1）在控件上添加验证器会将验证器注册到控件控制器的validators中，会在
调用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;
}

2）angular自带验证器指令
指令 说明
required、ng-required 必须有输入
pattern、ng-pattern 正则或函数进行校验
minlength、ng-minlength 最小长度控制
maxlength、ng-maxlength 最大长度控制

四个验证器指令的实现细节基本上是一模一样的：
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();
});

3）自定义验证器（验证当前名字是否被注册）

angular.module("demo").directive("nameRequired",function(){


    function link(controller) {

        var hasRegisteredName = ["张三","李四"];

        controller.$validators["namerequired"] = function (modelValue, viewValue) {

        var value = modelValue || viewValue;

        if(value){

            return hasRegisteredName.indexOf(value) < 0;

        }

        return true;
}

        }


return{

    “restrict”:”A”,（限制为属性级别）
    "require":"ngModel",

}

});

3.控件状态CSS类
• .ng-valid
• .ng-invalid
• .ng-pending
• .ng-pristine
• .ng-dirty
• .ng-untouched
• .ng-touched
控件值无效且控件被访问过控件边框变色

.ng-invalid .ng-touched{

border-color: red;

}