vee-validate 不适用于 bootstrap-vue

Question

我正在尝试将 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

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

Answer 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

vee-validate not working with bootstrap-vue

vuejs2

bootstrap-vue

vee-validate