Hide/delay Vee 验证中的密码确认错误

Question

当我在 Vuejs 中使用 Vee-validate 库时，当我关注密码字段时，它显示错误与密码确认不匹配。

我的代码：

   <input v-validate="'required|min:6|confirmed'" type="password" class="form-control" id="password" name="password" placeholder="New Password" v-model="password"></input>
         <span class="is-danger" v-if="errors.has('password')">{{errors.first('password')}}</span>

    <input v-validate="'required'" type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Verify password">

如何使用它并且在焦点密码确认字段之前不显示错误？

Answer 1

好的，我搜索解决方案的时间比我应该搜索的时间长，但在 vee-validate 中似乎没有 built-in 方法，所以我想出了自己的解决方案。

Vue.use(VeeValidate)

new Vue({
 el: '#app',
 data: {
   password: '',
   password_confirmation: ''
 },
 
 computed: {
   onConfirm () {
      if(this.errors.items.length){
        return this.errors.items.find(f => {
          return f.rule !== "confirmed"
        })
      }
   }
 }
})

<script src="https://unpkg.com/vee-validate@2.0.5/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>


<div id="app">
  <input v-validate="'required|min:6|confirmed'" 
      type="password" 
      class="form-control" 
      id="password" 
      name="password" 
      placeholder="New Password" 
      v-model="password">
    </input>

  <span class="is-danger" 
    v-if="errors.has('password') && onConfirm">
      {{errors.first('password')}}
    </span>
    <input v-validate="'required'" 
    type="password" 
    class="form-control" 
    id="password_confirmation" 
    name="password_confirmation" 
    placeholder="Verify password" 
    v-model="password_confirmation"
  >
  <span class="is-danger" 
    v-if="!onConfirm  && 
    password_confirmation">
      {{errors.first('password')}}
    </span>
</div>

Hide/delay Vee 验证中的密码确认错误

Hide/delay password confirmation error in Vee validate

validation

vuejs2

vee-validate