用途:该技能面向使用 React Hook Form 与 Zod 构建类型安全 React 表单的开发场景,覆盖表单 schema、字段数组、多步表单以及校验错误排查。
主要能力:提供 zodResolver 连接 Zod 校验;用 z.infer 从 schema 推导类型;支持 useForm、useFieldArray、Controller,以及 onSubmit、onChange、onBlur、all 等校验模式;包含同步与异步校验、动态字段、多步表单、shadcn/ui 集成、服务端校验等模板与参考文档。
安装命令:bun add react-hook-form@7.66.1 zod@4.1.12 @hookform/resolvers@5.2.2。
使用方式:定义 Zod schema,用 z.infer 推导类型,通过 useForm 配合 zodResolver 初始化并设置 defaultValues,用 register 注册原生输入或 Controller 包装第三方组件,handleSubmit 包装提交处理;服务端使用同一 schema 调用 parse 校验。
限制与注意:必须设置 defaultValues,避免受控/非受控警告;客户端校验可被绕过,需在服务端再次校验;不要直接修改表单值,应使用 setValue;提交中应禁用按钮防止重复提交;自定义组件需用 Controller;useFieldArray 的 name 必须与 schema 字段名一致。