VeeValidate 4校验失败时如何为输入框添加is-invalid类适配Bootstrap样式

问题背景 #

基于Vue与Vee-validate实现Bootstrap风格表单校验效果，需匹配Bootstrap校验样式生效规则：

• 校验失败时，input输入框必须携带is-invalid类
• 对应错误提示元素必须携带invalid-feedback类

现存问题：校验失败时无法为输入框添加is-invalid类。Vee-validate v3版本支持通过官方状态标识规则控制输入元素类名，该用法在v4版本中已被废弃。

依赖版本 #

• vee-validate: ^4.5.11
• vue: ^3.2.33

初始复现代码 #

<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 (!value) {
          return "This field is required";
        }

        // 邮箱格式校验
        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";
        }

        // 校验通过
        return true;
      },
    },
  };
</script>

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

解决方法 #

VeeValidate v4 移除了v3版本自动注入校验状态类的能力，所有类名控制需要通过组件插槽暴露的字段元状态手动绑定，修改逻辑如下：

1. 不要使用自闭合写法调用Field组件，改用插槽写法，通过插槽导出的meta对象获取字段校验状态，field对象包含输入框需要绑定的所有原生属性（name、value、输入/失焦事件等）
2. 给原生input绑定动态类，当字段触发过失焦且校验不通过时，添加is-invalid类

修改后的模板核心代码：

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <!-- 通过插槽导出字段属性与状态 -->
      <Field v-slot="{ field, meta }" name="email" :rules="validateEmail">
        <input
          v-bind="field"
          type="email"
          class="form-control"
          :class="{ 'is-invalid': meta.touched && meta.invalid }"
        >
      </Field>
      <ErrorMessage class="invalid-feedback" name="email" />
      <button class="btn btn-primary">Sign up</button>
    </Form>
  </div>
</template>

判断逻辑中meta.touched代表字段已经被用户触碰（触发过失焦事件），meta.invalid代表字段校验不通过，两者同时满足时添加is-invalid类，和Bootstrap默认交互逻辑一致。如果需要点击提交按钮后才展示错误样式，可给Form组件添加插槽导出submitCount参数，将类判断条件改为meta.invalid && (meta.touched || submitCount > 0)即可。

如果项目中表单较多，可以基于该逻辑封装通用的Bootstrap表单输入组件，避免重复编写类名判断逻辑。

内容的提问来源于stack exchange，提问作者Huy Phạm