本文介绍了在 Vee 验证中隐藏/延迟密码确认错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在 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 验证中隐藏/延迟密码确认错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
