Vue3：如何使用 Bootstrap 和 VeeValidate 4 获取错误消息？答案

【问题标题】：Vue3: How to get error messages with Bootstrap and VeeValidate 4?Vue3：如何使用 Bootstrap 和 VeeValidate 4 获取错误消息？
【发布时间】：2021-08-24 16:32:05
【问题描述】：

我想将 vue3 与 bootstrap 4/5 与 veevalidate 4 一起使用。

<template>
<Form as="form" @submit.prevent="onFormSubmit" class="needs-validation" :class="{ 'was-validated': wasValidated }"> 
    <div class="form-group">
        <label for="firstNameId">First Name *</label>
        <Field name="firstname" as="input" id="firstNameId" type="text" rules="required|firstname" class="form-control" placeholder="First Name" v-model="firstName" aria-describedby="input-true input-false input-help" aria-invalid="true" />
        <ErrorMessage as="div" name="firstname" v-slot="{ message }">
        {{ message }}
        <div class="invalid-feedback">
            {{ message }}
        </div>
        </ErrorMessage>
        <div class="valid-feedback">Good!</div>
    </div>
<Form>
</template>

<script>
import { Field, Form, ErrorMessage, defineRule } from 'vee-validate';

defineRule('required', value => {
    if (!value || !value.length) {
        return 'This field is required.';
    }
    return true;
});

defineRule("firstname", (value) => {
    if (!/^[a-zA-Z0-9( ),'.:/-]+$/i.test(value)) {
         return "Please use only letters, numbers and the following special characters: ( ),'.:/-";
    }
    return true;
});

export default {
    components: {
    Form,
    Field,
    ErrorMessage
    },
    data () {
        return {
             firstName: "",
             wasValidated: false,
    },
    methods: {
         onFormSubmit(values) {
              alert(JSON.stringify(values, null, 2));
              console.log("Submitted");
              console.log(values);

              var forms = document.getElementsByClassName('needs-validation');
              // Loop over them and prevent submission
              var validation = Array.prototype.filter.call(forms, function(form) {
                  form.addEventListener('submit', function(event) {
                      if (form.checkValidity() === false) {
                          event.preventDefault();
                          event.stopPropagation();
                       }
                       this.wasValidated = true;
                   }, false);
               });
          },
    },
};
</script>

问题是我无法使用invalid-feedback 或valid-feedback 类激活div。

我可以将was-validated 类添加到<form>-tag，但我在第二次点击提交按钮后首先得到反馈。

【问题讨论】：

标签： forms vue.js validation bootstrap-5 vee-validate

【解决方案1】：

解决方法是使用v-slot="{ errors }。

<template>
  <Form as="form" @submit="onFormSubmit" class="needs-validation" :validation-schema="schema" v-slot="{ errors }"> 
    <div class="form-group">
      <label for="firstNameId">First Name *</label>
      <Field 
        name="firstname" 
        as="input" id="firstNameId" 
        type="text" 
        rules="required|firstname" 
        class="form-control"
        :class="errors.contractor ? 'is-invalid' : 'is-valid'"
        placeholder="First Name" 
        v-model="firstName" 
        aria-describedby="input-true input-false input-help" 
        aria-invalid="true"
      />
      <ErrorMessage as="div" name="firstname" v-slot="{ message }" class="invalid-feedback">
        {{ message }}
      </ErrorMessage>
    <Form>
  </template>

  <script setup>
  import { Field, Form, ErrorMessage} from 'vee-validate';
  import * as yup from 'yup';
  </script>

  <script>
  export default {
    components: {
      Form,
      Field,
      ErrorMessage
    },
    data () {
      return {
         schema: yup.object().shape({
           username: yup.string().min(0).max(20).label('Username'),
         }),
      };
   },
   methods: {
     onFormSubmit(values) {
          console.log(JSON.stringify(values, null, 2));
     },
   },
 };
 </script>

但是仍然存在输入字段立即生效的问题。

【讨论】：