自定义异步vue-验证器中断验证组件

Question

我正在尝试使用vue-验证器对我的一个vue-验证器组件执行异步验证，遵循这个例子。我想检查一下用户提供的电子邮件是否已经被拿走了。

这是我目前正在挣扎的验证器实现：

Vue.validator('emailUnique', {
    message: 'this e-mail address has already been taken',
    check: function (val) {
        return Vue.http({
            url: '/validate/email-unique',
            method: 'POST',
            data: {
                email: val
            }
        }).then(
            function (response) { // success
                console.log('success');
                return Promise.resolve();
            },
            function (response) { // error
                console.log('error');
                return Promise.reject();
            }
        ).catch(function(error) {
            console.log('catch');
            return Promise.reject();
        });
    }
});

我在我的组件中使用的方法如下：

<div>
<validator name="userValidator">
  <form novalidate class="form-group" v-on:submit.prevent="submitUser">
    <div class="form-group">
      <label for="email">E-Mail</label>
        <input id="email" name="email" type="email" class="form-control"
               placeholder="jon@greatesthits.com"
               v-model="user.email" required v-validate:email="{ required: true, email: true, emailUnique: true }">
        <div class="form-validation-error" v-if="$userValidator.email.required && $userValidator.email.touched">
          <span>this field is required</span>
        </div>
        <div class="form-validation-error" v-if="$userValidator.email.email && $userValidator.email.touched">
          <span>not a valid e-mail address</span>
        </div>
        <div class="form-validation-error" v-if="$userValidator.email.emailUnique && $userValidator.email.touched">
          <span>this e-mail address has already been taken</span>
        </div>
    </div>
  </form>
</validator>
</div>

不幸的是，这破坏了电子邮件的整个验证对象：

[Vue warn]: Error when evaluating expression "$userValidator.email.required && $userValidator.email.touched".
TypeError: scope.$userValidator.email is undefined

如果我没有注册emailUnique验证器，那么其他两个验证规则也可以正常工作。另外，对/validate/email-unique的请求是正确提交的，并接收到预期的返回值(仅是一个带有true/false的json_encoded响应)，并且我看到了相应的console.log()输出('success', 'error', 'catch')，因此我猜测check函数的返回值是不正确的，并导致vue-validator失败。

不过，Vue.http确实返回了一个Promise，因此根据文档和上面链接的示例，这应该是可以的。我还试图从true子句中返回.then()或false，但是Vue.http仍然返回Promise (这显然使vue-validator感到麻烦--也许我返回的Promise对象不是vue-validator期望的表单？)。

这上面有线索吗？

Answer 1

如果您将vue.config.debug转换为false，此问题是否仍然存在？在Vue实际创建变量之前，Vue试图计算scope.$userValidator.email.required，这是一个问题。这只会在调试模式期间标记一个错误，否则会工作。这个变量最终会存在并工作，只是在最初评估的时候就没有了。这是指令生命周期中的一个问题，需要对vue核心进行一些调整。

见此处：https://github.com/vuejs/vue-validator/issues/99

据我所知，这个问题并没有得到解决。如果您还没有升级Vue和vue-validator，可以尝试将它们升级到最新版本。我知道@kazupon，vue-validator的创建者在vue 1.0.19中有一个与此相关的贡献，但不确定它是否已修复：https://github.com/vuejs/vue/releases/tag/v1.0.19

编辑：--这是在新版本的中修正的。vue 1.0.19增加了对终端指令的支持。从医生那里：

Vue通过递归遍历DOM树来编译模板。然而，当它遇到终端指令时，它将停止遍历该元素的子元素。

简而言之，Vue将不再试图编译验证器中的元素，而将其留给插件。确保您有验证器2.0.0，它是在vue核心更新后几天发布的：https://github.com/vuejs/vue-validator/releases/tag/v2.0.0