Zod .refine()方法在Vue 3中无法生效‘二选一必填’规则

核心原因分析 #

你的refine规则未执行，大概率是以下两种情况之一：

• 基础验证拦截：如果两个字段被定义为z.string().required()，当字段为空时，Zod会先触发「必填」的基础错误，直接跳过后续的refine验证，导致回调函数和日志都不会执行。
• 判断逻辑未覆盖空字符串/空值场景：如果字段允许空字符串，但你的判断逻辑data.descriptionActiEconomiques || data.noga会把空字符串（''）、undefined都视为假值，但如果表单提交时字段值是带空格的空字符串，可能会误判为有效值。

分步解决步骤 #

1. 修正Schema的基础字段定义 #

先把两个字段设为可选且允许空字符串，避免基础验证拦截refine：

import { z } from 'zod';

const FormSchema = z.object({
  // 允许字段为空字符串或未提交（undefined）
  descriptionActiEconomiques: z.string().optional(),
  noga: z.string().optional()
})

2. 完善refine的判断逻辑 #

加入trim()处理空格，确保空字符串或纯空格都被视为未填写：

.refine((data) => {
  // 验证：至少有一个字段非空且非纯空格
  const hasDescription = Boolean(data.descriptionActiEconomiques?.trim());
  const hasNoga = Boolean(data.noga?.trim());
  return hasDescription || hasNoga;
}, {
  message: "L'un des deux champs 'Description des Activités Économiques' ou 'NOGA' est requis.",
  // 将错误绑定到两个字段（部分表单库可能需要单独处理错误显示）
  path: ['descriptionActiEconomiques', 'noga'],
})

3. 验证Schema是否正常工作 #

先在控制台手动测试，排除表单集成问题：

// 测试用例1：两个字段都为空
const testData1 = { descriptionActiEconomiques: '', noga: '' };
console.log(FormSchema.safeParse(testData1)); // 应返回带错误的结果

// 测试用例2：填写其中一个字段
const testData2 = { descriptionActiEconomiques: 'Test activité', noga: '' };
console.log(FormSchema.safeParse(testData2)); // 应返回成功的结果

4. 表单集成的额外检查 #

如果手动测试Schema正常，但表单中仍无提示，检查表单库的配置：

• 如果你用vee-validate：确保useForm的validationSchema正确传入了FormSchema，且验证时机设置正确（比如mode: 'onSubmit'或mode: 'onChange'）。
• 如果你用原生表单提交：确保在提交时调用了FormSchema.parse()或safeParse()，并正确处理错误信息。

错误显示的优化（可选） #

部分表单库可能不支持将一个错误绑定到多个字段，你可以：

• 将path设为其中一个字段（比如path: ['descriptionActiEconomiques']），然后在表单中手动将错误信息显示到两个字段下方。
• 或者添加两次refine，分别将错误绑定到每个字段，但注意避免重复验证。

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