vee-validate 不能与 bootstrap-vue 一起使用
Posted
技术标签:
【中文标题】vee-validate 不能与 bootstrap-vue 一起使用【英文标题】:vee-validate not working with bootstrap-vue 【发布时间】:2019-03-04 20:15:26 【问题描述】:我正在尝试使用 vee-validate 通过 bootstrap-vue 进行表单验证,但无法正常工作。基本上,我想做:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
<b-row>
<span> errors.first('email') </span>
</b-row>
</b-form-input>
但是当我在字段中输入非电子邮件地址时,我什么也看不到。但是,如果我改变:
b-form-input
到 input
然后一切正常。这种行为有解决方法吗?任何帮助将不胜感激。
【问题讨论】:
【参考方案1】:您已将错误消息放在没有内部插槽的<b-form-input>
中,因此不会呈现错误消息。如果您将它们移到输入之后,它应该可以解决您的问题:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
</b-form-input>
<b-row>
<span> errors.first('email') </span>
</b-row>
您还可以在<b-form-input>
和周围的<b-form-group>
上使用Bootstrap-Vue 的state
和invalid-feedback
属性以更好地显示验证错误。这一切都在codepen
【讨论】:
以上是关于vee-validate 不能与 bootstrap-vue 一起使用的主要内容,如果未能解决你的问题,请参考以下文章