AngularJS入门基础—

<label name="email">your email</label>

</form>

/*如下是朋友空间的内容*/

angular 高级校验特性

在一些情况下,单独的表单验证并不能满足需要,可能有一些特殊的校验,比如关联两个数据等等.通常这类校验都是可复用的,也就是需要一个directive.编写的自定义校验的 directive 并不复杂,首先需要了解几个 Angular 提供的属性和接口.

1. $setValidity()

这个方法可以人为的设置一个表单控件的$valid 以及$ invalid, 也就是说改变表单控件是否通过校验的状态.类似的还有$setDirty()和$setPristine().

1	`ngModel.$setValidity('max-custom',` `true);` `// 类似这样的设置就将一个表单控件的状态改变了, ngModel 是 directive 的 link 的第四个参数,$setValidity 的第一个参数可以定义一个标志,第二个参数true 表示通过验证, false 表示未通过`

2. $parsers

这个属性解释起来稍微有点抽象,当 ngModel 的值发生变化的时候,Angular 会自己调用 $setViewValue(value),然后 ngModel 的 $parsers 数组中得函数会被逐个调用,当 $parsers[0] 中的方法被调用后执行结果会传递给 $parsers[1],以此类推,这些函数可以对 ngModel 的值进行转换或者通过 $setValidity() 设置表单的合法性.

所以如果我们想实现点什么特殊的校验,可以在 $parsers 中插入一个 function, 然后它会在验证链中被调用,如果不希望数据模型发生更新,让 $parsers 的函数返回值返回 undefined 即可.

.directive('maxMax', function(){

return {

require: 'ngModel',

restrict: 'A',

link: function($scope, iElm, iAttrs, ngModel) {

if(!ngModel) return;

ngModel.$parsers.unshift(function(viewValue){

var num = parseInt(viewValue);

if(num>=0 && num<99){

ngModel.$setValidity('maxMax',true);

return viewValue;

}else{

ngModel.$setValidity('maxMax',false);

return undefined;

}

});

}

};

})

红色字体部分经过我的实践及探索，发现有误，正确的应该如下：

所以如果我们想实现点什么特殊的校验,可以在 $parsers 中插入一个 function, 然后它会在验证链中被调用,如果不希望数据模型发生更新,让 $parsers 的函数返回值返回原值即可.