javascript - 如何将 VeeValidator3 错误添加到 Bootstrap-Vue Validator

Question

我需要将 Bootstrap-Vue 输入表单控件与 VeeValidate 集成。VeeValidate 工作正常，但我需要在出现错误时将错误行为发送到文本字段。现在，我可以看到该字段下方的错误，但绿色轮廓仍围绕文本字段，其中包含复选标记。

  <validation-provider rules="odd" v-slot="{ errors }">
    <b-form-group
       id="fieldset-1"
       label="Last Name"
       label-for="last-name"
       :valid-feedback="errors[0]"
    >
      <b-form-input id="last-name" v-model="lastName" trim></b-form-input>
      <span class="text-danger" v-show="errors[0]">{{ errors[0] }}</span>
    </b-form-group>
  </validation-provider>

extend('odd', {
  validate: value => {
    return value % 2 !== 0;
  },
  message: 'This field must be an odd number'
});

标签： javascriptvuejs2bootstrap-vuevee-validate

Answer 1

你的b-form-group验证倒退了。如果您希望 Bootstrap-Vue 在该字段中指示错误，请使用state和invalid-feedbackpropspassed以及 VeeValidate 提供的标志：

  <validation-provider rules="odd" v-slot="{ errors, passed }">
    <b-form-group
       id="fieldset-1"
       label="Last Name"
       label-for="last-name"
       :invalid-feedback="errors[0]"
       :state="passed"
    >
      <b-form-input id="last-name" v-model="lastName" trim></b-form-input>
    </b-form-group>
  </validation-provider>

这样，当字段验证失败时输入将显示为无效，并且 Bootstrap-Vue 将自行处理显示错误，而不必使用自定义的<span>.