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

然后一切正常。这种行为有解决方法吗?任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

您已将错误消息放在没有内部插槽的&lt;b-form-input&gt; 中,因此不会呈现错误消息。如果您将它们移到输入之后,它应该可以解决您的问题:

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

您还可以在&lt;b-form-input&gt; 和周围的&lt;b-form-group&gt; 上使用Bootstrap-Vue 的stateinvalid-feedback 属性以更好地显示验证错误。这一切都在codepen

中得到了展示

【讨论】:

以上是关于vee-validate 不能与 bootstrap-vue 一起使用的主要内容,如果未能解决你的问题,请参考以下文章

Vee-Validate 自定义日期验证

bootstra表格鼠标悬停与状态类

直接引用vee-validate校验插件

vue2移动端使用vee-validate进行表单验证

Vue 表单校验 vee-validate

如何使用 vee-validate 3 验证自定义组件?