SuperAPI AI 工具集

zod-react-hook-form

前端与建站

查看项目

更新于 10-16 05:02

技能介绍

用途:在 React/Next.js 项目中,用 Zod 定义校验 schema,并通过 React Hook Form 管理表单状态与提交,实现类型安全的表单校验。

主要能力:

  1. Schema 定义:在 lib/validations.ts 中用 z.object 定义字段规则(如 min、email、enum、optional),并用 z.infer 导出类型。
  2. 客户端表单:使用 useForm 配合 zodResolver(contactFormSchema),结合 shadcn/ui 的 Form、FormField、FormItem、FormControl、FormLabel、FormMessage 组件渲染字段与错误。
  3. Server Action 集成:在 'use server' 文件中用 safeParse 校验 FormData,返回 { success, errors } 结构,客户端用 useActionState 处理状态与 isPending。
  4. 本地化错误消息:通过 createContactSchema(t) 工厂函数把 next-intl 的翻译函数注入 schema 消息。
  5. 选择/单选字段:用 Select 的 onValueChange 与 field.onChange 绑定。
  6. 环境变量校验:用 envSchema.parse(process.env) 校验 NEXT_PUBLIC_SITE_URL、RESEND_API_KEY、STRIPE_SECRET_KEY 等。

使用方式:安装 zod、react-hook-form、@hookform/resolvers,按示例创建 schema、表单组件与 Server Action。

适用场景:Next.js 应用中的联系表单、预约请求表单、环境变量校验等。

限制:资料未提供具体安装命令、版本要求、收费信息或性能数据;示例依赖 next-intl、shadcn/ui 等库,需自行配置。