如何将VeeValidator3错误添加到Bootstrap-Vue验证程序中

问题描述

我需要将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'
});

解决方法

您的b-form-group验证倒退了。如果您想让Bootstrap-Vue在该字段中指出错误，请使用use the state and invalid-feedback props和passed flag that VeeValidate provides，

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

,

我认为有另一种方法可以解决这个问题：

SELECT *
from TABLE_2 T2
LEFT OUTER JOIN (SELECT REC_ID,MIN(REV_ID)
                   FROM TABLE_1
                  GROUP BY REC_ID) T1 on T1.REC_ID = T2.REC_ID;

您的方法中还应该有一个名为 <validation-provider name="Email" :rules="{ required: true,email: true }" v-slot="validationContext"> <b-form-group label="Email" :invalid-feedback="validationContext.errors[0]"> <b-form-input type="email" v-model="email" :state="getValidationState(validationContext)" /> </b-form-group> </validation-provider> 的方法：

getValidationState