Vue中PrimeVue结合Yup嵌套对象表单验证无错误提示问题求助

问题场景 #

在Vue.js中用PrimeVue的Form组件结合Yup做表单验证时，碰到嵌套结构表单数据的验证问题：

• 定义了嵌套结构的formData，包含frequencies.frequencyType字段
• 配置了对应的Yup嵌套校验规则
• 在FormField中设置name="frequencies.frequencyType"，但提交表单后错误提示无法显示
• 将数据结构扁平化、修改name为frequencyType后，验证功能恢复正常

解决要点 #

• 补全Form组件的resolver绑定：原代码里Form组件的:resolver属性没有赋值，必须写成:resolver="resolver"，否则校验逻辑根本不会执行，这是核心问题。
• 使用FormField插槽的绑定语法：别直接用v-model="formData.frequencies.frequencyType"，改用FormField插槽提供的field.value做双向绑定，这样表单才能正确跟踪字段状态，同步校验结果。
• 保持规则与字段name层级一致：你的Yup嵌套规则和name="frequencies.frequencyType"是匹配的，这部分无需修改。

修正后的完整代码示例 #

<script setup>
import { Form, FormField } from '@primevue/forms';
import { useToast } from 'primevue/usetoast';
import { yupResolver } from '@primevue/forms/resolvers/yup';
import * as yup from 'yup';
import { reactive } from 'vue';

const toast = useToast();
// const formStore = useFormStore(); // 未用到可暂时注释

const formData = reactive({
    frequencies: {
        frequencyType: '',
        frequencyDays: [],
        frequencyWeeks: [],
        frequencyTimes: [
            {
                frequencyTimeValue: '',
                frequencyTimeMaxDuration: ''
            }
        ]
    },
});

// 补充示例选项，确保代码可运行
const frequencyOptions = [
    { value: 'daily', label: '每日' },
    { value: 'weekly', label: '每周' },
    { value: 'monthly', label: '每月' }
];

const resolver = yupResolver(
    yup.object({
        frequencies: yup.object({
            frequencyType: yup.string().required('检查频率为必填项。')
        })
    })
);

const onFormSubmit = (data) => {
    console.log('提交的数据:', data);
    toast.add({ severity: 'success', summary: '成功', detail: '表单提交完成' });
};
</script>
<template>
    <Form 
        :initialValues="formData" 
        :resolver="resolver" 
        @submit="onFormSubmit" 
        class="flex flex-col gap-2 w-full"
    >
        <FormField 
            v-slot="{ field }" 
            name="frequencies.frequencyType" 
            class="flex flex-col gap-1"
        >
            <label for="frequencyType" class="block text-sm font-medium">检查频率</label>
            <Select 
                v-model="field.value" 
                :options="frequencyOptions" 
                optionValue="value" 
                optionLabel="label"
                class="w-full" 
                :invalid="field.invalid" 
            />
            <Message 
                v-if="field.invalid" 
                severity="error" 
                size="small" 
                variant="simple"
            >
                {{ field.error?.message }}
            </Message>
        </FormField>
        <button type="submit" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">提交</button>
    </Form>
</template>

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