Angularjs自定义表单验证

自定义表单验证指令要用到这几个知识点：

$parsers，下面是对这个的解释：当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时, $parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后,执行结果会传 递给第二个$parse,以此类推。

这些函数可以对输入值进行转换,或者通过$setValidity()函数设置表单的合法性。 使用$parsers数组是实现自定义验证的途径之一。例如,假设我们想要确保输入值在某两个

数值之间,可以在$parsers数组中入栈一个新的函数,这个函数会在验证链中被调用。

$formatters：当绑定的ngModel值发生了变化,并经过$parsers数组中解析器的处理后,这个值会被传递 给$formatters流水线。同$parsers数组可以修改表单的合法性状态类似,$formatters中的函 数也可以修改并格式化这些值。

上面是对将要用到的知识点的官方的说明，下面是给出具体的例子代码，一个自定义验证这个数字必须是偶数，一个远程验证用户名，当然远程验证的向后台发送请求的代码你可以根据自己的项目修改。

<form name="myForm">
    <div class="form-group">
        <label for="">User name:</label>
        <input type="text" class="form-control" name="userName" ensure-unique="username" ng-model="user.name" required>
        <span class="error" ng-show="myForm.userName.$error.unique">Required!</span>
    </div>
    <div class="form-group">
        <label for="">Last name:</label>
        <input type="text" class="form-control" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.lastName.$error.minlength">Too short!</span>
        <span class="error" ng-show="myForm.lastName.$error.maxlength">Too long!</span>
    </div>
    <div class="form-group">
        <label for="">User age:</label>
        <input type="text" class="form-control" name="userAge" ng-model="user.age" even required>
        <span class="error" ng-show="myForm.userAge.$error.even">数字必须是偶数</span>
    </div>
</form>

js代码：

angular.module('MyApp', [])
.controller('ExampleController', ['$scope', function ($scope) {

}])
.directive('even',function(){
    return {
        restrict:"A",
        require:"ngModel",
        link:function(scope,ele,attrs,ngModelController){
            ngModelController.$parsers.push(function(viewValue){
                if(viewValue % 2 === 0){
                    ngModelController.$setValidity('even',true);
                }else{
                    ngModelController.$setValidity('even',false);
                }
                return viewValue;
            });
        }
    }
})
.directive('ensureUnique', ['$http','$timeout','$window',function($http,$timeout,$window) {
    return {
        restrict:"A",
        require: 'ngModel',
        link: function(scope, ele, attrs, ngModelController) {
            scope.$watch(attrs.ngModel, function(n) {
                if (!n) return;
                $timeout.cancel($window.timer);
                $window.timer = $timeout(function(){
                    $http({
                        method: 'get',
                        url: '/api/checkusername/', //根据换成自己的url
                        params:{
                            "username":n
                        }
                    }).success(function(data) {
                        ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的，其实就是返回一个是否正确的字段，具体的这块可以自己修改根据自己的项目
                    }).error(function(data) {
                        ngModelController.$setValidity('unique', false);
                    });
                },500);
            });
        }
    };
}]);