自定义 async vue-validator 会破坏验证组件

Question

我正在尝试使用vue-validator 对我的一个 Vue.js 组件执行异步验证，遵循this example。我想检查用户提供的电子邮件是否已被占用。

这是我目前正在努力解决的验证器实现：

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'），所以我猜测返回检查函数的值不正确并导致vue-validator 失败。

Vue.http 确实返回了Promise，因此根据文档和上面链接的示例应该没问题。我还尝试从.then() 子句中返回true 或false，但Vue.http 仍然返回Promise（这显然困扰vue-validator——也许我要返回的Promise 对象是不是vue-validator 期望的形式？）。

这方面有什么建议吗？

Answer 1

如果您将vue.config.debug 设置为 false，此问题是否仍然存在？存在一个问题，即 Vue 尝试在 vue-validator 实际创建该变量之前评估 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