Question

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

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

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，所以根据文档和上面链接的示例，这应该没问题。我还尝试从true子句中返回false或.then()，但Vue.http仍然返回Promise（显然有问题vue-validator - - 我回复的Promise对象可能不是vue-validator期望的形式？）。

对此有什么想法吗？

Answer 1

如果将vue.config.debug设为false，是否仍会出现此问题？ Vue尝试评估scope.$userValidator.email.required之前有vue-validator实际创建该变量的问题。这只会在调试模式下标记错误，否则会起作用。该变量将在EVENTUALLY存在并且正常工作，而不是在它最初评估时。这是指令生命周期的一个问题，需要进行一些调整才能提升核心。

见这里：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

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

1 个答案: