validation - 自定义异步 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 的形式-验证器 期望？)。

有什么建议吗？

Answer 1

如果将 vue.config.debug 设置为 false，这个问题是否仍然存在？有一个问题，Vue 尝试在 vue-validator 实际创建该变量之前评估 scope.$userValidator.email.required。这只会在 Debug模式下标记错误，否则会起作用。该变量最终将存在并起作用，只是在最初评估时不存在。这是指令生命周期的一个问题，需要对 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 compiles templates by recursively walking the DOM tree. However when it encounters a terminal directive, it will stop walking that element’s children.

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