angularjs – 一次一封电子邮件表单验证

我正在尝试为电子邮件字段实现表单验证.验证应该做到以下：

>检查是否已通过必需属性输入电子邮件,如果未输入电子邮件则显示消息

>检查电子邮件是否具有有效格式(似乎是在没有指定属性的情况下自动完成)并在格式错误时显示消息

>检查电子邮件在$http.get电话上是否唯一,并在发现电子邮件时显示一条消息,因此无法使用

我希望显示第一条消息,如果该字段为空,则在电子邮件无效且第三条消息出现时显示第二条消息,如果找到电子邮件地址,因此一次不唯一.

如果我只尝试“required”属性,这很有效,但是一旦我添加了我的email-available指令属性,它就不再检查电子邮件的格式,并且email-available指令与required属性一起执行.两个消息都会弹出,但我只希望用户一次看到一条消息.

我正在使用angularjs 1.1.3.

谁能告诉我,我可能做错了什么？

HTML

<div id="user_mod" class="mod_form" ng-show="userModScreenIsVisible">
<form name="mod_user" novalidate>
    <input type="email" name="email" ng-model="user.email" placeholder="E-Mail" required email-available/>
    <div class="user-help" ng-show="mod_user.email.$dirty && mod_user.email.$invalid">Invalid:
        <span ng-show="mod_user.email.$error.required">Please enter your email.</span>
        <span ng-show="mod_user.email.$error.email">This is not a valid email.</span>
        <span ng-show="mod_user.email.$error.emailAvailable">This email address is already taken.</span>
    </div>
</form>

指示

directive('emailAvailable', function($http) { // available
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {
                ctrl.$setValidity('emailAvailable', false);
                if(viewValue !== "" && typeof viewValue !== "undefined") {
                    console.log("variable is defined");

                    $http.get('/api/user/email/' + viewValue + '/available')
                        .success(function(data, status, headers, config) {
                            console.log(status);
                            ctrl.$setValidity('emailAvailable', true);
                            return viewValue;
                        })
                        .error(function(data, status, headers, config) {
                            console.log("error");
                            ctrl.$setValidity('emailAvailable', false);
                            return undefined;
                        });
                } else {
                    console.log("variable is undefined");
                    ctrl.setValidity('emailAvailable', false);
                    return undefined;
                }
            });
        }
    };
});

我看到你已经解决了自己的问题,但我想我可以在这里给你一些提示/建议(我希望)：

1)你需要做的就是确保你的验证器在内置的角度验证器推入()后运行到ctrl.$parsers,而不是unshift()它.

2)由于先前运行的验证程序显示它无效(即如果字段已经失效,如果您不想进行Ajax调用),则要使验证程序无法运行.您只需要在验证器内的if语句中检查ctrl.$invalid.

3)在开始ajax调用之前以及收到之后,您需要单独调用$setValidity()来使表单无效.这样,在AJAX返回之前,您的表单无效,并说明它是否有效.

4)这可能很小,但除非你添加一个ctrl.$formatter,最初分配给$scope中对象的值在写入屏幕之前不会被验证.如果您的表单通过路由,ng-repeat或ng-include动态添加到屏幕,并且预先填充了数据,则可能会出现问题.通常,所有验证器都应具有$parser组件(view – > model)和$formatter组件(model – > view).

5)谨慎一点.如果模型无效,大多数验证器都将完全删除模型中的值.因为你正在进行异步调用,所以你必须立即在解析器函数中返回viewValue.如果字段无效,解析器函数通常会返回undefined,从而防止无效数据出现在模型中.

6)由于验证器具有在$error对象中维护的状态,因此在最初命中此异步验证器时,您需要清除它.见下文.

7)旁注：在你的回答中,我注意到你在ajax响应处理程序中返回值…这对你没有任何作用.因为调用是异步的,所以你总是从该解析器返回undefined.它会更新你的型号吗？如果确实如此,我会感到惊讶.

以下是我如何更改您的原始指令以使其按您可能的方式工作：

app.directive('emailAvailable', function($http, $timeout) { // available
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
          console.log(ctrl);
            // push the validator on so it runs last.
            ctrl.$parsers.push(function(viewValue) {
                // set it to true here, otherwise it will not 
                // clear out when previous validators fail.
                ctrl.$setValidity('emailAvailable', true);
                if(ctrl.$valid) {
                  // set it to false here, because if we need to check 
                  // the validity of the email, it's invalid until the 
                  // AJAX responds.
                  ctrl.$setValidity('checkingEmail', false);

                  // now do your thing, chicken wing.
                  if(viewValue !== "" && typeof viewValue !== "undefined") {
                      $http.get('/api/user/email/' + viewValue + '/available')
                          .success(function(data, status, headers, config) {
                              ctrl.$setValidity('emailAvailable', true);
                              ctrl.$setValidity('checkingEmail', true);
                          })
                          .error(function(data, status, headers, config) {
                              ctrl.$setValidity('emailAvailable', false);
                              ctrl.$setValidity('checkingEmail', true);
                          });
                  } else {
                      ctrl.$setValidity('emailAvailable', false);
                      ctrl.$setValidity('checkingEmail', true);
                  }
                }
                return viewValue;
            });

        }
    };
});

And… of course, here is a plunker demonstrating it all