自定義異步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驗證器打破驗證組件

回答

相關問題