Vue3+Vee-Validate4+Yup+PrimeVue表单对象验证异常求助

问题根源分析 #

你的代码存在三个核心问题：

1. initialValues传递错误：formData是reactive对象，无需加.value，直接传递对象即可。
2. 表单绑定错误：使用v-bind="formData.username"完全错误，这会把字段值绑定到元素属性上，而非双向绑定表单输入。Vee-Validate需要跟踪表单值的变化才能更新验证状态。
3. 验证时机未配置：默认验证模式下，页面加载时会立即验证空字段，导致初始状态就显示错误；且未正确绑定字段值，输入内容后验证状态无法更新。

修正方案 #

1. 修正useForm初始化 #

调整initialValues的传递方式，并配置验证时机避免初始错误：

import { reactive } from 'vue';
import { useForm } from 'vee-validate';
import * as yup from 'yup';

const formData = reactive({
    username: '',
    email: '',
});

const validationSchema = yup.object({
  username: yup.string().required('Username is required'),
  email: yup.string().email('Invalid email address').required('Email is required'),
});

// 解构出values用于表单绑定，配置validationMode避免初始验证
const { handleSubmit, errors, values } = useForm({
  initialValues: formData, // 直接传递reactive对象
  validationSchema,
  validationMode: 'lazy', // 字段失去焦点时验证，可选'submit'仅提交时验证
});

const submitForm = handleSubmit(async (values) => {
  console.log('Form submitted with values:', values);
  // 如果需要同步到formData，可以在这里赋值
  Object.assign(formData, values);
});

2. 修正表单绑定逻辑 #

将输入框的v-bind改为v-model，绑定到useForm返回的values对象属性：

<form @submit.prevent="submitForm">
  <div class="p-fluid formgrid grid">
    <div class="field col-12">
       <label for="username">Username</label>
       <InputText id="username" placeholder="Enter username" type="text" 
           v-model="values.username" :class="{ 'p-invalid': errors.username }" />
       <div class="text-red-500" v-if="errors.username">{{ errors.username }}</div>
    </div>
    <div class="field col-12">
        <label for="email">Email</label>
        <InputText id="email" placeholder="Enter email" type="text" 
         v-model="values.email" :class="{ 'p-invalid': errors.email }" />
        <div class="text-red-500" v-if="errors.email">{{ errors.email }}</div>
    </div>
  </div>
  <div class="text-center">
    <Button v-if="mode == 'create'" class="mr-1" label="Create" type="submit" />
    <Button v-if="mode == 'edit'" class="mr-1" label="Save Changes" type="submit" />
    <router-link to="/users">
      <Button class="secondary" label="Discard" />
    </router-link>
  </div>
</form>

3. 可选：同步useForm values到自定义formData #

如果需要保持formData和表单值同步，可以添加监听：

import { watch } from 'vue';

watch(values, (newValues) => {
  Object.assign(formData, newValues);
}, { deep: true });

验证模式说明 #

• lazy：字段失去焦点时触发验证，适合大多数场景
• submit：仅在表单提交时验证，避免输入过程中频繁提示错误
• aggressive：输入过程中实时验证，适合需要即时反馈的场景

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