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

指令的生命周期

inject阶段

directive将指令注入使得HTML模板可以使用；

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深度剖析与最佳实践

自定义指令的实现

定义指令名ngChange；

restrict指明指令的应用方式

1. E-元素;

2. A-属性；

3. C-类；

4. M-注释；

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，对表单进行验证。这也是将验证写成指令形式的目的。