如何结合vee-validate 4.7.x与Vuetify 3.1.x实现表单验证？

问题核心原因 #

你的代码存在三个关键问题导致错误提示无法正常显示：

• 绑定值层级错误：useField返回的value本身就是Vue响应式Ref对象，无需额外.value；errorMessage同理。
• 提交按钮位置错误：提交按钮不在<form>标签内，无法触发表单submit事件，导致验证逻辑未执行。
• 可选：Yup Schema未正确启用（若使用Yup验证）。

修正后的完整代码 #

<script setup>
import { markRaw } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';

// 使用Yup验证（推荐），markRaw避免响应式代理问题
const schema = markRaw(yup.object({
  email: yup.string().email('请输入有效的邮箱地址').required('邮箱不能为空'),
  password: yup.string().min(8, '密码至少需要8个字符').required('密码不能为空'),
}));

const { handleSubmit } = useForm({
  validationSchema: schema, // 启用Yup Schema
  // 若使用自定义验证，可替换为下方代码
  // validationSchema: {
  //   email(value) {
  //     if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true;
  //     return 'Must be a valid e-mail.';
  //   },
  //   password(value) {
  //     if (value?.length >= 8) return true;
  //     return 'Password needs to be at least 8 characters.';
  //   },
  // }
});

// 获取字段的响应式状态
const email = useField('email');
const password = useField('password');

function onInvalidSubmit({ errors }) {
  console.log('验证错误:', errors);
}

const onSubmit = handleSubmit((values) => {
  console.log('表单提交值:', values);
}, onInvalidSubmit);
</script>

<template>
  <div style="padding: 10px">
    <h4>基于Vee-Validate + Vuetify的表单验证</h4>
    <form @submit.prevent="onSubmit">
      <v-text-field
        label="E-mail"
        v-model="email.value"
        :error-messages="email.errorMessage"
        variant="outlined"
      ></v-text-field>

      <v-text-field
        label="Password"
        type="password"
        v-model="password.value"
        :error-messages="password.errorMessage"
        variant="outlined"
        class="mt-4"
      ></v-text-field>

      <!-- 提交按钮必须放在form内部 -->
      <v-btn color="primary" class="mt-4" type="submit"> Submit </v-btn>
    </form>

    <div class="mt-4">Email: {{ email.value }}</div>
    <div>Password: {{ password.value }}</div>
  </div>
</template>

关键修正点说明 #

1. 绑定层级修正：将v-model="email.value.value"改为v-model="email.value"，error-messages同理改为email.errorMessage，适配useField的返回值结构。
2. 按钮位置调整：把提交按钮移到<form>标签内部，确保点击时触发表单submit事件，从而触发Vee-Validate的验证逻辑。
3. Yup优化：使用markRaw处理Yup Schema，避免Vue对其进行不必要的响应式代理，同时给每个验证规则添加自定义错误提示，提升用户体验。

内容的提问来源于stack exchange，提问作者ShadowGames