angularjs指令验证发送前的唯一电子邮件检查

时间:2014-03-25 15:58:01

标签: angularjs angularjs-directive

HTML

<input type="email" data-input-feedback="" data-ng-model="user.email" data-unique-email="" required="required" placeholder="Email" class="form-control" id="email" name="email">

JS

.directive('uniqueEmail',function (User) {
    return {
        require:'ngModel',
        restrict:'A',
        link:function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (viewValue) {
                /*
                 Is there a way to check if it's a valid email ?
                both ngModelCtrl.$valid and ngModelCtrl.$error.email doesn't work 
                */
                User.isUniqueEmail(viewValue).then(function(data){
                    ngModelCtrl.$setValidity('uniqueEmail', !data.email);
                });
                return viewValue;
            });
        }

    };
});

有没有办法检查它是否是有效的电子邮件 在将值发送到服务器之前?

更新

ngModelCtrl.$parsers.push

在我们确定运行了其他验证器后,使用push()将其作为最后一个解析器运行

所以只有在需要时才会传递电子邮件验证 拨打电话以查看唯一的电子邮件

结束

.directive('uniqueEmail',function (User) {
        return {
            require:'ngModel',
            restrict:'A',
            controller:function ($scope) {
              $scope.isValidEmail = function(){
                  return $scope.form.email.$error.email;
              }  
            },
            link:function (scope, element, attrs, ngModelCtrl) {
                var original;
                // If the model changes, store this since we assume it is the current value of the user's email
                // and we don't want to check the server if the user re-enters their original email
                ngModelCtrl.$formatters.unshift(function(modelValue) {
                    original = modelValue;
                    return modelValue;
                });
                // using push() here to run it as the last parser, after we are sure that other validators were run
                ngModelCtrl.$parsers.push(function (viewValue) {
                    if (viewValue && viewValue !== original ) {
                        if(scope.isValidEmail(viewValue)){
                            User.isUniqueEmail(viewValue).then(function(data){
                                ngModelCtrl.$setValidity('uniqueEmail', !data.email); 
                            });
                        }
                        return viewValue;
                    }
                });
            }

        };
    });

使用编译和优先级

.directive('uniqueEmail',function (User) {
        return {
            require:'ngModel',
            restrict:'A',
            priority:0,
            compile: function compile(tElement, tAttrs, transclude) {
                return function (scope, element, attrs, ngModelCtrl) {
                    var original;
                    // If the model changes, store this since we assume it is the current value of the user's email
                    // and we don't want to check the server if the user re-enters their original email
                    ngModelCtrl.$formatters.unshift(function(modelValue) {
                        original = modelValue;
                        ngModelCtrl.$setViewValue(original);
                        return modelValue;
                    });
                    // using push() here to run it as the last parser, after we are sure that other validators were run
                    ngModelCtrl.$parsers.push(function (viewValue) {
                        if (viewValue && viewValue !== original ) {
                            if(scope.isValidEmail()){
                                User.isUniqueEmail(viewValue).then(function(data){
                                    ngModelCtrl.$setValidity('uniqueEmail', !data.email); 
                                });
                            }
                            return viewValue;
                        }
                    });
                    scope.isValidEmail = function(){
                        return scope.form.email.$isvalid;
                    }  
                }
            }
        }    
    });

它仍然无法使用scope.form.email的值。$ isvalid 是不可靠的,似乎已经过时了:(

1 个答案:

答案 0 :(得分:0)

parsers的顺序非常重要。我不确定,但是您的解析器可能已经在内置解析器之前注册,因此首先被解雇。

也许如果您拼接$parsers数组并在0处插入解析器,它可能会有用。