用途:用 React Hook Form v7 与 Zod v4 构建类型安全的表单校验,同一份 schema 在客户端与服务器复用。安装:npm install react-hook-form@7.70.0 zod@4.3.5 @hookform/resolvers@5.2.2。
主要能力:用 zodResolver 连接 Zod 与表单;用 z.infer<typeof schema> 推断类型;支持 refine 跨字段校验、transform 数据转换、discriminatedUnion 条件校验、useFieldArray 动态列表、Controller 接入第三方组件、多步表单、异步校验与服务器错误映射。Zod v4.3.0+ 提供 .exactOptional()、.xor()、z.fromJSONSchema()。
用法要点:标准输入用 register(非受控,性能更好),第三方组件用 Controller 并展开 {...field};必须设置 defaultValues;服务器端用同一 schema 校验(schema.parse),不可省略;useFieldArray 的 key 用 field.id 而非 index;嵌套错误用可选链读取;校验模式可选 onSubmit、onBlur、onChange;多步表单可用 shouldUnregister 或 trigger 指定字段。该技能还包含模板与参考文档,并列出 20 个已知问题及规避方法。
限制与注意:Zod v4 与 @hookform/resolvers 存在 TypeScript 兼容问题,可用 import { z } from 'zod/v3' 规避;Zod v4 的 .optional() 字段被设为空字符串会误报,可用 .nullish() 或 preprocess;useFieldArray 不支持原始类型数组,需包装为对象;SSR 下字段 ID 可能不匹配;300+ 字段且同时使用 resolver 与读取 formState 时注册可能卡顿约 10-15 秒,可通过避免解构 formState、mode 设为 onSubmit、拆分子表单、懒渲染缓解。shadcn/ui 已弃用 Form 组件,建议改用 Field 组件。V8 尚处 beta,存在 id 改 key 等破坏性变更,稳定版时间未定。