如何优化表单验证

angular.module('com.ngnice.app').directive('bfFieldError', function bfFieldError($compile) {
    return {
        //限制为只能通过属性(Attribute)的形式使用,
        restrict: 'EA',
        //这个元素上必须有一个ng-model属性,如果没有,就会报错
        require: 'ngModel',
        //link函数会在当前指令初始化的时候被自动执行
        link: function(scope, element, attrs, ngModel) {
            var subScope = scope.$new(true);
            subScope.hasError = function() {
                return ngModel.$invalid && ngModel.$dirty;
            };
            subScope.errors = function() {
                return ngModel.$error;
            };
            //把一段HTML编译成“活DOM(Live DOM)”,然后把subScope传给它,这个Live DOM将会跟随subScope的变化自动更新自己
            var hint = $compile('<ul ng-if="hasError()"><li ng-repeat="(name, wrong) in errors()">{{name|error}</li></ul>')(subScope);
            //把这段Live DOM追加到当前元素后面,好让它显示出来
            element.after(hint);
        }
    };
});

 

angular.module('com.ngnice.app').constant('Errors', {
    email: '不是有效格式的邮件地址',
    required: '此项不能为空'
});

 

angular.module('com.ngnice.app').filter('error', function (Errors) {
    return function (name) {
        return Errors[name] || name;
    }
});

 

posted @ 2016-08-03 18:10  echo2016  阅读(255)  评论(0编辑  收藏  举报