# 将 Zod 与框架集成 ## 目的将 Zod v4 验证与流行框架（包括 React Hook Form、Next.js 服务器操作、Express API、tRPC 等）集成的综合指南。 ## 支持的框架 Zod 无缝集成： **前端框架：** * React Hook Form - 使用 `zodResolver` 自动验证 * Next.js 服务器操作 - 类型安全的表单验证 * React Query - 突变输入验证 **后端框架：** * Express - REST API 的中间件验证 * Fastify - 预处理程序验证 * tRPC - 使用 `.input()` 实现端到端类型安全 * GraphQL (Pothos) - 模式验证插件 **数据库/ORM：** * Prisma - 如果使用与 Prisma 模型类型匹配的 Zod 模式验证 Prisma 查询输入，请使用 prisma-6 中的验证查询输入技能来实现具有类型推断的综合模式模式。 ## 快速启动模式 ### 反应钩子形式从'react-hook-form'导入{useForm}；从 '@hookform/resolvers/zod' 导入 { zodResolver }；从 'zod' 导入 { z }； const formSchema = z.object({ 电子邮件： z.email().trim().toLowerCase(), 密码：z.string().min(8) }); type FormData = z.infer; 函数形式（）{ const { 注册、handleSubmit、formState: { 错误 } } = useForm({ 解析器：zodResolver(formSchema) }); 返回（

console.log(data))}> <输入{...注册('电子邮件')} /> {errors.email && {errors.email.message}} ）； } ### Next.js 服务器操作 '使用服务器'； const 架构 = z.object({ 电子邮件： z.email().trim().toLowerCase() }); 导出异步函数createUser(formData: FormData) { const 结果 = schema.safeParse({ 电子邮件：formData.get('电子邮件') }); 如果（！结果。成功）{ 返回 { 错误： result.error.flatten().fieldErrors }; } 返回 { 数据：等待 db.create(result.data) }; } ### Express 中间件从“快递”进口快递；函数 validate(schema: T) { 返回（请求，res，下一个）=> { const 结果 = schema.safeParse(req.body); 如果（！结果。成功）{ 返回 res.status(400).json({ 错误: result.error.flatten() }); } 请求体=结果.数据；下一个（）; }; } const userSchema = z.object({ email: z.email() }); app.post('/users', validate(userSchema), async (req, res) => { const user =等待createUser(req.body); res.json(用户); }); ### tRPC 从 '@trpc/server' 导入 { initTRPC }； const t = initTRPC.create(); const createUserInput = z.object({ 电子邮件： z.email().trim().toLowerCase(), 名称： z.string().trim().min(1) }); 导出 const appRouter = t.router({ 创建用户：t.procedure .input(创建用户输入) .mutation(异步 ({ 输入 }) => { 返回等待db.users.create（{数据：输入}）； }) }); ## 最佳实践 ### 1\.在模块级别定义模式 const schema = z.object({...}); // ✅ 可重复使用函数处理程序（）{ const schema = z.object({...}); // ❌ 重新创建 } ### 2\.使用类型推断 type FormData = z.infer; // ✅ interface FormData { ... } // ❌ 重复模式 ### 3\.转换用户输入 z.email().trim().toLowerCase() // ✅ 标准化 z.email() // ❌ 没有标准化 ### 4\.使用 SafeParse 处理用户输入 const 结果 = schema.safeParse(userInput); // ✅ 尝试 { schema.parse(userInput) } // ❌ ### 5\.提供用户友好的错误 z.email({ error: "无效的电子邮件" }) // ✅ z.email() // ❌ 一般错误 ### 6\.在边界处验证导出异步函数createUser（数据：未知）{ const 已验证 = schema.parse(data); // ✅ } 导出异步函数createUser(data: User) { 等待 db.create(数据); // ❌ 没有验证 } ## 特定于框架的技巧 ### 反应钩子形式 * 使用 `zodResolver` 进行自动集成 * 使用 `valueAsNumber` 作为数字输入 * 在模块级别定义架构以提高性能 ### Next.js * 使用“safeParse”在服务器操作中进行验证 * 使用 `z.stringbool()` 作为复选框值 * 返回表单显示的扁平化错误 ### 快递 * 创建可重用的验证中间件 * 分别验证主体、查询和参数 * 验证错误返回400状态 ### tRPC * 将 `.input()` 与 Zod 模式结合使用 * 跨客户端/服务器自动类型推断 * 验证发生在程序执行之前 ### GraphQL * 使用Pothos验证插件 * 模式验证在解析器之前运行 * 一致的错误格式 ## 参考文献 * v4 功能：使用 zod-4 插件中的验证字符串格式技能 * 错误处理：使用 zod-4 插件中的自定义错误技能 * 测试：使用zod-4插件中的testing-zod-schemas技能 * 转换：使用 zod-4 插件中的转换字符串方法技能 **跨插件参考：** **React 19 集成：** * 如果实施全面的表单验证，请使用客户端和服务器验证策略的验证表单技能 * 如果实现服务器操作，请使用 Zod 的异步服务器功能模式的实现服务器操作技能 **Next.js 16 集成：** * 如果保护服务器操作，请使用保护服务器操作技能进行身份验证和输入验证模式 **Prisma 6 集成：** * 如果使用 Zod 验证 Prisma 查询输入，请使用 prisma-6 中的验证查询输入技能来完成验证管道模式：外部输入 → Zod 验证 → Prisma 操作 ## 成功标准 * ✅ 与框架验证集成的模式 * ✅ 跨边界的类型推断 * ✅ UI 中用户友好的错误消息 * ✅ SafeParse 用于用户输入验证 * ✅ 应用字符串转换 * ✅ 入口点验证 * ✅ 可重复使用的验证模式

集成 Zod 框架

包含技能