Question

我从angularJS开始，我想检查表单中输入的电子邮件是否已存在。为此，我将使用REST与back_end进行通信。我的问题是：如何在发送带有指令的表单之前检查电子邮件，并在电子邮件已被使用时显示错误消息。

<form name="registrationForm">

<div>
    <label>Email</label>
    <input type="email" name="email" class="form-group"
           ng-model="registration.user.email"
           ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,8})$/"
           required compare-to="registration.user.email"            
            />

模型

demoApp.directive('existTo', [function () {
return {
    require: "ngModel",
    scope: {
        otherModelValue: "=existTo"
    },
    link: function(scope, element, attributes, ngModel) {

        ngModel.$validators.existTo = function(modelValue) {
            return modelValue == scope.otherModelValue;
        };

        scope.$watch("otherModelValue", function() {
            ngModel.$validate();
        });
    }
}; }]);

back_end checkmail：控制器

demoApp.controller('signupCtrl',function($scope,$http) {
$scope.verficationEmail = function(mail) {

    $scope.test = mail;
    var urll="";
    var test="";

    $scope.urll="http://localhost:8080/app/personne/verifmail?msg=";
    $scope.aplrest=$scope.urll+$scope.test;
    var ch3=$scope.aplrest;

$http.post(ch3).
        success(function(respons) {
            $scope.data = respons;
            $scope.valid = respons.valid;

            if ( $scope.valid == "false") {
                $scope.msgalert="mail used";
            }
        })
};});

提前感谢您的帮助

Answer 1

You will most likely want to put the verficiation function in a service and inject it wherever it's needed:

demoApp.factory('verifyEmail', function() {
    return function(mail) {
        var test=mail;

        var urll="http://localhost:8080/app/personne/verifmail?msg=";
        var aplrest=urll+test;
        var ch3=aplrest;

        return $http.post(ch3)
    };
});

Then...

In your directive:

demoApp.directive('existTo', ["$q","verifyEmail",function ($q, verifyEmail) {
return {
    require: "ngModel",
    scope: {
        // This is probably not needed as ngModel's 
        // validators will pass the current value anyway
        otherModelValue: "=existTo"
    },
    link: function(scope, element, attributes, ngModel) {
        // Note the change to $asyncValidators here            <-------------
        ngModel.$asyncValidators.existTo = function(modelValue) {
            var deferred = $q.defer()
            verifyEmail(modelValue).then(function(respons){
                deferred.resolve(respons.valid);
            });
            return deferred.promise
        };

        scope.$watch("otherModelValue", function() {
            ngModel.$validate();
        });
    }
}; }]);

In your controller:

demoApp.controller('signupCtrl',function($scope,$http,verifyEmail) {
    $scope.verficationEmail = function (mail) {
        verifyEmail(mail).success(function(respons) {
            $scope.data = respons;
            $scope.valid = respons.valid;

            if ( $scope.valid == "false") {
                $scope.msgalert="mail used";
            }
        });
    }
});

Also, in your html you dont seem to be actually using the directive exist-to, I'm guessing that's what compare-to should have been. But, in any case, it might look like this:

<input type="email" name="email" class="form-group"
       ng-model="registration.user.email"
       ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,8})$/"
       required exist-to            
        />

Note that there's no need to pass the model value to the directive

Hope that helps.

验证电子邮件已被使用或不是angularjs

1 个答案: