0Pricing
React Academy · 课时

使用 Zod 进行架构验证

集成 @hookform/resolvers 和 Zod 架构，实现类型安全的表单验证。

使用 Zod 进行架构验证 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将通过 @hookform/resolvers 将 React Hook Form 与 Zod 架构集成，为表单和 TypeScript 类型提供统一的真实来源，从而实现类型安全的验证。

为什么使用架构验证？

将验证规则直接写在 register() 中会变得冗长且难以复用。Zod 架构可以在一个地方定义所有（ALL）验证规则，自动推导 TypeScript 类型，还可以在前端和后端之间共享。

安装

安装 Zod 和 RHF 解析器包。
npm install zod @hookform/resolvers

定义 Zod 架构

使用 z.object() 定义表单结构。每个字段都使用带有链式验证方法的 Zod 类型。
import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

推导 TypeScript 类型

使用 z.infer 自动从 Zod 架构推导 TypeScript 类型。无需单独的接口。
type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

通过解析器连接到 useForm

将 zodResolver(schema) 传给 useForm 的 resolver 选项。RHF 会使用 Zod 验证表单，而不是使用直接写入字段的规则。
import { zodResolver } from '@hookform/resolvers/zod';

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

不再需要直接写入字段的规则

使用 zodResolver 后，您不再需要将规则传给 register()。只需调用不带第二个参数的 register('fieldName')。所有验证都由 Zod 处理。
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

复杂的 Zod 校验

Zod 支持强大的校验：url()、uuid()、regex() 可用于自定义逻辑，refine() 可用于自定义逻辑，superRefine() 可用于跨字段校验。
const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

跨字段校验

Zod 的 refine() 或 superRefine() 可以访问所有字段值，从而实现“结束日期必须晚于开始日期”这类跨字段规则。
const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

与后端共享 schema

在全栈 TypeScript 项目中，请从共享模块导出 Zod schema。在 React 表单 AND 您的 Node.js/Next.js 接口处理程序中同时使用它，以确保校验保持一致。
// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

快速检查

在 TypeScript 中，为表单类型使用 z.infer 的主要优势是什么？

回顾

定义 Zod schema，使用 z.infer 推断 TypeScript 类型，将 zodResolver 传递给 useForm，并移除内联校验规则。使用 refine() 进行跨字段校验，并在前端与后端之间共享 schema。

接下来

下一课：**使用 useFieldArray 管理动态字段**——您将使用 useFieldArray 钩子添加、删除和重新排序动态表单字段。

常见问题解答

「使用 Zod 进行架构验证」课时是免费的吗？

是的 — 「使用 Zod 进行架构验证」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 Zod 进行架构验证」这节课中我会学到什么？

集成 @hookform/resolvers 和 Zod 架构，实现类型安全的表单验证。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 Zod 进行架构验证」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. React Hook Form 入门
  2. 验证规则与错误消息
  3. 使用 Zod 进行架构验证
  4. 使用 useFieldArray 创建动态字段
← 返回 React Academy