zod和yup通过声明式schema统一管理运行时校验与typescript类型推导，支持formdata解析、类型转换、错误映射及表单提交流程控制。

TypeScript 本身只在编译期检查类型，表单数据来自用户输入（字符串、空值、未定义等），运行时结构完全不可信。Zod 和 Yup 正是为填补这个缺口而设计：用一份声明同时生成 TypeScript 类型 + 运行时校验逻辑。

定义 Schema 并自动推导 TS 类型

不用重复写 interface 和校验规则。Zod 的 z.infer 能从 schema 直接提取精确类型，Yup 则通过 Yup.InferType 实现类似效果。

• Zod 示例：定义 schema 后，type FormValues = z.infer<typeof formschema></typeof> 得到与校验逻辑完全一致的类型，IDE 自动补全、类型报错都实时生效
• Yup 示例：同理，type FormValues = Yup.InferType<typeof formschema></typeof>，类型会随 .required()、.email() 等约束动态变化（比如 .optional() 会让字段变成可选）
• 关键点：schema 是唯一数据源，改一处，类型和校验同步更新，避免“类型声明和实际校验不一致”的经典坑

处理 FormData 到对象的转换与类型对齐

原生 new FormData(form) 返回的是键值对集合，所有值都是字符串，且不包含数字、布尔、日期等真实类型。Zod/Yup 默认无法直接识别这些语义。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 先转成普通对象：Object.fromEntries(new FormData(form))
• Zod 推荐用 z.coerce.number()、z.coerce.boolean()、z.coerce.date() 显式声明“这个字符串应被转为数字/布尔/日期”，失败时自动报错
• 空字符串问题：Zod 默认不 trim，需搭配 .trim() 或 z.preprocess() 清洗；Yup 可用 .transform((v) => v?.trim())
• 例如邮箱字段：email: z.string().trim().email()，既去空格又校验格式

绑定校验结果到表单 UI

校验失败不能只 console.log，要让错误精准显示在对应 input 下方或通过 setCustomValidity 触发原生提示。

• Zod：safeParse() 返回 { success, data, error }，用 error?.format() 得到按字段组织的嵌套错误对象，方便映射到 DOM
• Yup：validate() 抛异常，需捕获 err.inner 数组，遍历每个 { path, message }，再用 form.querySelector(`[name="${path}"]`) 定位元素
• 统一做法：把错误信息写入 input.setCustomValidity(message)，再调 form.reportValidity() 触发浏览器默认气泡提示
• 更精细控制：可维护一个 errors 对象（如 { email: string | null }），配合 React/Vue 响应式更新错误文案

整合进 submit 事件流（不依赖框架）

HTML 表单原生 submit 是同步行为，Zod/Yup 校验是异步（即使规则全同步，API 也返回 Promise），必须手动拦截并控制流程。

• 监听 form.addEventListener('submit', async (e) => { e.preventDefault(); ... })
• 验证通过后，用 form.submit() 手动触发真实提交（适用于传统 POST）
• 若走 fetch/AJAX，验证成功后直接调用 API，不再调用 form.submit()
• 注意 abortEarly: false —— 设为 false 才能一次收集所有字段错误，而不是遇到第一个就停

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南