angularjs自定义表单验证

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

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

<form ng-if="!global.isLogin" ng-submit="subForm(useForm.$valid)" name="useForm" novalidate>
<div class="form-group has-feedback" ng-class="{true:'has-success',false:'has-error'}[useForm.username.$valid]">
<input class="form-control" placeholder="用户名" type="text" required ng-model="user.username" name="username" validename/>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-if="useForm.username.$dirty&&useForm.username.$valid"></span>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-if="useForm.username.$dirty&&useForm.username.$invalid"></span>
</div>
<div class="form-group has-feedback" ng-class="{true:'has-success',false:'has-error'}[useForm.password.$dirty&&useForm.password.$valid]">
<input class="form-control" placeholder="密码" type="password" required ng-model="user.password" name="password">
<span class="glyphicon glyphicon-ok form-control-feedback" ng-if="useForm.password.$dirty&&useForm.password.$valid"></span>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-if="useForm.password.$dirty&&useForm.password.$invalid"></span>
</div>
<button type="submit" class="btn btn-default btn-block btn-primary">登录</button>
</form>在验证用户名的输入框中，我们使用一个自定义的指令，来远程验证我们的用户名是否存在
/*远程判断用户名是否存在*/
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("<span style="font-family: Arial, Helvetica, sans-serif;">validename"</span><span style="font-family: Arial, Helvetica, sans-serif;">,false);</span>
}
});

return val;
});
}
}
});在指令的第四个参数里面我们可以通过对该参数来设置该验证规则，当用户同控制器进行交互时并且ngModel的setViewValue()方法被调用的时候，会依次通过$parsers数组里面的函数，第一个$parsers调用之后执行结果会作为参数传递给第二个$parser
     通过ngModel.$serValidity();将一个错误的标记记录到$error数组里面，如果在$parser的方法最后不返回一个数值或者是返回的是undefined的话，该model得到的value的值就会是undefined，并且表单的验证将不会通过，因为对表单里面某个字段的验证通过是要求该字段对应的$error数组长度为0