React Hook Form + Zod：如何比较表单中不同嵌套字段？

需求场景 #

需要验证如下嵌套结构的对象：

{
  productionData: {
    manufacturing: {
      productionDate: "2010-01-01"
    },
  },
  salesData: {
    sellingDate: "2009-01-01"
  }
}

核心要求：当salesData.sellingDate早于productionData.manufacturing.productionDate时，抛出验证错误。两个字段处于不同嵌套层级，需明确验证schema中能否访问整个表单数据，以及最佳实现方式。

最佳实现方式 #

以主流的Zod验证库为例，根级别的refine()方法完全支持访问整个表单数据，可直接跨嵌套层级提取字段做比较，这是处理此类场景的最优方案。

代码实现 #

import { z } from "zod";

// 定义验证Schema
const ProductSchema = z.object({
  productionData: z.object({
    manufacturing: z.object({
      productionDate: z.string().date() // 先验证日期格式合法性
    })
  }),
  salesData: z.object({
    sellingDate: z.string().date()
  })
}).refine((data) => {
  // 转换为Date对象进行日期比较
  const productionDate = new Date(data.productionData.manufacturing.productionDate);
  const sellingDate = new Date(data.salesData.sellingDate);
  // 返回true表示验证通过，false则触发错误
  return sellingDate >= productionDate;
}, {
  message: "销售日期不能早于生产日期",
  path: ["salesData", "sellingDate"] // 将错误关联到具体字段，方便表单定位
});

// 测试验证逻辑
const invalidData = {
  productionData: {
    manufacturing: {
      productionDate: "2010-01-01"
    },
  },
  salesData: {
    sellingDate: "2009-01-01"
  }
};

const validationResult = ProductSchema.safeParse(invalidData);
if (!validationResult.success) {
  console.log(validationResult.error.issues);
  // 输出示例：[{ code: 'custom', message: '销售日期不能早于生产日期', path: [ 'salesData', 'sellingDate' ], ... }]
}

关键说明 #

• 根级refine()的回调参数data是完整的表单对象，可通过嵌套路径直接访问任意层级的字段
• 先通过z.string().date()确保两个字段是合法的日期格式，再进行比较逻辑验证
• 通过path选项将错误绑定到salesData.sellingDate字段，便于在表单中精准提示错误位置

Yup库实现参考 #

若使用Yup验证库，可通过根级test()方法实现相同逻辑：

import * as yup from "yup";

const ProductSchema = yup.object({
  productionData: yup.object({
    manufacturing: yup.object({
      productionDate: yup.date().required()
    })
  }),
  salesData: yup.object({
    sellingDate: yup.date().required()
  })
}).test(
  "date-compare",
  "销售日期不能早于生产日期",
  function(data) {
    const productionDate = data.productionData.manufacturing.productionDate;
    const sellingDate = data.salesData.sellingDate;
    return sellingDate >= productionDate;
  }
);

结论 #

无论是Zod还是Yup这类现代验证库，根级别的自定义验证方法（refine/test）都能完整访问表单数据，完全支持跨嵌套字段的比较逻辑，这就是处理此类场景的标准最佳实践。

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