需统一前后端表单校验规则:在/shared/validation.ts中用zod定义唯一schema,前端通过safeparse校验并匹配后端错误结构,后端启用strict模式拦截非法字段,错误响应严格遵循validationerror接口格式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在Codex项目中实现前后端一致的表单校验,需确保前端提交前验证逻辑与后端接收时校验规则完全匹配,避免因规则不一致导致数据被前端放过却在后端拒绝,或前端过度拦截而影响正常提交。
统一校验规则定义
在Codex项目根目录下创建 /shared/validation.ts 文件,用 TypeScript 定义所有字段的校验约束对象,包括正则、最小长度、必填标识、数值范围等。
每个规则对象必须导出为常量,例如 【emailRule】 同时用于前端 Formik 的 validationSchema 和后端 Express 中间件的校验函数参数。
禁止在前端写死正则字符串、在后端另写一套判断逻辑——所有规则源必须唯一,否则后续修改极易遗漏某端。
前端使用 Zod 生成运行时校验器和 TypeScript 类型
安装 zod:npm install zod。
在 /shared/validation.ts 中用 Zod 定义 schema,例如 const userFormSchema = z.object({ email: z.string().email(), age: z.number().min(18) });。
前端组件中导入该 schema,通过 userFormSchema.safeParse(values) 执行同步校验,错误信息格式与后端返回结构对齐(字段名+message 键)。
这一步不能用 Yup 替代 Zod,因为 Yup 不支持自动导出 TypeScript 接口类型,会导致前后端字段类型脱节。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像,然后保存
后端复用同一份 Zod Schema 进行请求体校验
方法一:Express 中间件直接调用 schema.safeParse(req.body)。
方法二:使用 @zodern/express-zod 插件,在路由定义时绑定 schema,自动拦截非法 body 并返回标准错误响应。
注意:后端必须开启 【strict: true】 模式,禁止允许额外字段传入,否则攻击者可能绕过前端隐藏字段校验注入非法数据。
错误提示结构标准化
第一步:定义统一错误响应格式接口,在 /shared/types.ts 中声明 type ValidationError = { field: string; message: string }[];。
第二步:前端 Formik 的 validate 函数返回值、后端中间件的 res.status(400).json() 响应体,都严格遵循该结构。
第三步:前端 UI 层遍历该数组,用 field 值精准定位到对应 Input 的 helpText 区域渲染 message,不拼接、不转换、不二次映射。
这一步若把后端返回的 email → “邮箱格式错误” 再转成前端文案,就破坏了一致性基础——文案可本地化,但字段标识和错误分类必须原始透传。









