自定义异步vue验证器打破验证组件

我试图执行异步验证我的Vue.js组件之一，使用vue-validator，跟随this example。我想检查用户提供的电子邮件是否已被使用。自定义异步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="[email protected]" 
       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发布正确，并收到预期的返回值（只是一个json_encoded响应true/false），我看到相应的console.log()输出（'success', 'error', 'catch'），所以我猜测返回值为检查函数isn' t正确并导致vue-validator失败。

Vue.http虽然返回Promise，所以根据文档和上面链接的示例，应该没问题。我也试图从.then()子句中返回true或false，但仍然Vue.http返回Promise（这显然困扰vue-validator - 也许Promise对象，我返回的形式vue-validator预计不会）。

对此有任何提示吗？

来源

2016-04-13 falloutghst

如果您将vue.config.debug设置为false，此问题是否仍然存在？ Vue尝试评估scope.$userValidator.email.required之前存在一个问题，实际上是在创建该变量之前使用vue-validator。这只在调试模式下标记错误，否则工作。变量将事实上存在并且工作，而不是在最初评估时。这是指令生命周期中的一个问题，需要对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

来源

2016-04-13 13:53:52 Jeff

在撰写本文时，我还在vue 1.0.16（但已经在'vue-validator 2.0.0'上），更新了vue到'vue 1.0.21'解决了这个问题。非常感谢！ – falloutghst

自定义异步vue验证器打破验证组件

回答

相关问题