VeeValidate 4 字段验证状态

Question

我正在尝试使用 Vue 和 Vee-validate 模仿 Bootstrap form validation styling。

为了获得 Boostrap 验证错误消息，当出现验证错误时，输入本身必须有 is-invalid class 呈现。而且除此之外，错误信息元素当然要有invalid-feedbackclass。

当出现验证错误时，我正在努力将 is-invalid class 添加到输入中。

在 Vee-validate 3 中，我能够使用 this guide 控制输入元素的 classes。但它似乎已被弃用。

This is a code sandbox that you can play with. Nothing extra-ordinary, just straight out of Veevalidate example.

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="email" type="email" :rules="validateEmail" class="form-control"/>
      <ErrorMessage class="invalid-feedback" name="email" />
      <button class="btn btn-primary">Sign up</button>
    </Form>
  </div>
</template>

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

  export default {
    components: {
      Form,
      Field,
      ErrorMessage,
    },
    methods: {
      onSubmit(values) {
        console.log(values, null, 2);
      },
      validateEmail(value) {
        // if the field is empty
        if (!value) {
          return "This field is required";
        }

        // if the field is not a valid email
        const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
        if (!regex.test(value)) {
          return "This field must be a valid email";
        }

        // All is good
        return true;
      },
    },
  };
</script>

<style>
  span {
    display: block;
    margin: 10px 0;
  }
</style>

版本

"vee-验证": "^4.5.11",
"vue": "^3.2.33",

Answer 1

您可以通过使用 <Field />-组件的作用域插槽呈现更复杂的字段。

如果您将 Field-component 替换为以下内容，它应该会按预期工作：

<Field name="email" :rules="validateEmail" v-slot="{ field, errors }">
  <input v-bind="field" type="email" :class="{'is-invalid': !!errors.length }" />
</Field>

VeeValidate 4 字段验证状态

VeeValidate 4 Field Validation State

vue.js

vue-component

vee-validate

vuejs3

版本