在 Vee 验证中隐藏/延迟密码确认错误 [英] Hide/delay password confirmation error in Vee validate

问题描述

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

我的代码:

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

解决方案

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

Vue.use(VeeValidate)新的 Vue({el: '#app',数据: {密码: ''，确认密码: ''},计算:{确认(){如果(this.errors.items.length){返回 this.errors.items.find(f => {返回 f.rule !== "已确认"})}}}})

<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="应用程序"><input v-validate="'required|min:6|confirmed'"类型=密码"类=形式控制"id="密码"名称=密码"占位符=新密码"v-model="密码"></input><span class="is-danger"v-if="errors.has('password') && onConfirm">{{errors.first('密码')}}</span><input v-validate="'required'"类型=密码"类=形式控制"id="password_confirmation"名称=密码_确认"占位符="验证密码"v-model="password_confirmation"><span class="is-danger"v-if="!onConfirm &&密码确认">{{errors.first('密码')}}</span>

When I use Vee-validate library in Vuejs, when I focus on password field, it show the error not match with password confirm.

My code:

   <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">

How can I use it and do not display the errors until focus password confirm field?

解决方案

Okay, I searched for the solution longer than I should but there doesn't seem a built-in way in vee-validate, so I came up with my own solution.

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>

这篇关于在 Vee 验证中隐藏/延迟密码确认错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！