Angular自定义指令实现一般性的表单验证

指令的生命周期

1. inject阶段
   directive将指令注入使得HTML模板可以使用；
2. complie和link

.directive('myDirective',function(){    return{        compile:function(tEle,tAttrs,transcludeFn){            //被实例化时执行一次，无法访问指令的$scope,可操作原始的DOM节点，编译完成返回link对象            return {                pre: function(scope, iElem, iAttrs){                    console.log(name + ': pre link => '+iElem.html());                },                post: function(scope, iElem, iAttrs){                    console.log(name + ': post link => ' + iElem.html());               }           }      }});

link中的pre-link和post-link大概理解成link之前和link之后，link之后表明了DOM结构稳定了，可以对子DOM进行一系列的操作，而pre-link不适合我们去添加设计子节点的行为。

可参考这本书AngularJS深度剖析与最佳实践

自定义指令的实现

1. 定义指令名ngChange；

2. restrict指明指令的应用方式
   1. E-元素;
   2. A-属性；
   3. C-类；
   4. M-注释；

3. link：这里的link指的是post-link;

.directive("ngChange",function(){    return {        restrict:"A",        link: function (scope, iElement, iAttrs,ngController) {        var ele=iElement[0].nextElementSibling;        var valid=true;        scope.$watch(iAttrs.ngModel, function (newVal,oldVal) {            if(newVal==undefined){                valid=false;                return;            }            if(newVal==""){                valid=false;                ele.innerHTML="输入框不能为空";                return;            }            if(Number(newVal)>20||Number(newVal)<0){                valid=false;                ele.innerHTML="输入必须大于0且小于20";                return;            }else if(newVal.indexOf(".")==-1){                valid=true;                return;            }            var reg=/[\d]{1,2}\.[\d]{2}/;            if(!reg.test(newVal)){                iElement[0].value=newVal.slice(0,5);                   valid=false;                ele.innerHTML="输入只能为两位小数";                return;            }            ele.innerHTML="";        });        iElement[0].onblur=function(){            if(!valid){                return;            }            ele.innerHTML="";            var reg=/[\d]{1,2}/;            if(reg.test(this.value)){                this.value=this.value+".00";            }        };    }});

view使用：

<label for="validnum">数字有效性验证</label><input type="text" name="validnum" ng-model="validnum" maxlength="5" ngChange><span></span>

可达到的效果：

对于验证规则相同的表单不区分表单中的ng-model，对表单进行验证。这也是将验证写成指令形式的目的。