如何将 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'
});

Answer 1

您的 b-form-group 验证倒退了。如果您希望 Bootstrap-Vue 指示字段中的错误，则 use the state and invalid-feedback props, with the 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>.

Answer 2

我认为这个问题还有另一种方法：

<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 的方法：

methods: {
    getValidationState({
        dirty,
        validated,
        valid = null
    }) {
        return dirty || validated ? valid : null;
    },
}

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

How to add VeeValidator3 errors into Bootstrap-Vue Validator

javascript

vuejs2

vee-validate

bootstrap-vue