angularjs自定义表单验证

在使用angularjs的表单验证的时候，往往需要我们进行一些自定义的表单验证功能，因为里面提供的表单验证功能不能满足我们的需求

我们可以通过指令的方式来实现自定义的表单验证的功能

				

					
					
					
				
				

					
					
					
				
				登录
			

在验证用户名的输入框中，我们使用一个自定义的指令，来远程验证我们的用户名是否存在

/*远程判断用户名是否存在*/
myApp.directive("validename",function(restAPI){
	return{
		require:'ngModel',
		link:function(scope,elem,attrs,ngModel){
			ngModel.$parsers.unshift(function(val){
				restAPI.unameCheck.get({name:val},function(data){
					if(data.msg){
						ngModel.$setValidity("validename",true);
					}else{
						ngModel.$setValidity("validename",false);
					}
				});

				return val;
			});
		}
	}
});

在指令的第四个参数里面我们可以通过对该参数来设置该验证规则，当用户同控制器进行交互时并且ngModel的setViewValue()方法被调用的时候，会依次通过$parsers数组里面的函数，第一个$parsers调用之后执行结果会作为参数传递给第二个$parser

     通过ngModel.$serValidity();将一个错误的标记记录到$error数组里面，如果在$parser的方法最后不返回一个数值或者是返回的是undefined的话，该model得到的value的值就会是undefined，并且表单的验证将不会通过，因为对表单里面某个字段的验证通过是要求该字段对应的$error数组长度为0