Remix 3 表单数据怎么用 data-schema 校验并返回 400 响应

Remix 3 表单数据怎么用 contenteditable="false">【免费下载链接】remixThe fully-stacked web framework项目地址: https://gitcode.com/GitHub_Trending/re/remixRemix 里一个常见的服务端表单处理需求浏览器把未经信任的字段 POST 到 action服务器要先校验这些字段字段不合法时把表单带着错误信息原样返回并置为400而不是直接进业务逻辑。这套流程由remix/data-schemaschema 与parseSafe、remix/data-schema/form-data面向表单的f.object/f.field、remix/data-schema/checks约束以及remix/middleware/form-data一次性解析 FormData几个包组合完成。本文以仓库里 social-auth 示例的注册signupaction 为参照给出从定义 schema 到验证400响应的完整路径。涉及的包与整体流程包作用remix/data-schemaschema 构建object、string等与parse/parseSaferemix/data-schema/form-data面向FormData/URLSearchParams的f.object、f.field、f.fields、f.file、f.filesremix/data-schema/checks约束minLength、maxLength、email、min、maxremix/data-schema/coerce把字符串字段转成 number / boolean / date / bigint 等remix/middleware/form-dataformData()中间件保证 FormData 只解析一次整体链路formData()中间件先把请求体解析成FormData放进 context → action 里用parseSafe(schema, formData)校验 → 失败就render(..., { status: 400 })把表单连同错误信息重新渲染。章节文档也明确建议在 action 里用parseSafe()当非法输入应该变成400响应时优先用它Data and Validation。参考实现signup 控制器、表单 schema、路由器与中间件。定义表单校验 schema用f.object建根 schema用f.field声明单个文本字段再用checks里的约束写具体规则。以 social-auth 的注册表单为例import { email, minLength } from remix/data-schema/checks import * as f from remix/data-schema/form-data import * as s from remix/data-schema export const signupSchema f.object({ name: f.field(s.string().pipe(minLength(1))), email: f.field(s.string().pipe(email())), password: f.field(s.string().pipe(minLength(8))), })含义name至少 1 个字符email必须通过email()检查password至少 8 个字符。表单提交过来的文本字段天然是字符串所以直接配s.string()如果某字段要当作数字、布尔或日期处理就改用coerce里对应的 schema如coerce.number()见>import { createMiddleware } from remix/router import { formData } from remix/middleware/form-data import { render } from remix/middleware/render import { staticFiles } from remix/middleware/static import { session } from remix/middleware/session import { loadDatabase } from ./middleware/database.ts import { loadAuth } from ./middleware/auth.ts function createSocialAuthMiddleware(cookie: Cookie, storage: SessionStorage) { return createMiddleware( staticFiles(./public, { cacheControl: no-store, must-revalidate, etag: false, lastModified: false, }), formData(), session(cookie, storage), loadDatabase(), loadAuth(), render(), ) }其中staticFiles/session/loadDatabase/loadAuth是该 demo 自己的业务中间件本任务真正关心的是formData()装好后 action 就能从 context 直接拿到解析好的formData不必自己再await request.formData()router.ts。在 action 里校验并返回 400action 从 context 解构出formData用parseSafe校验。parseSafe返回{ success, issues, value }success为true时value是校验后的类型化值为false时issues是{ message, path? }的数组data-schema README。失败分支重新渲染表单并置400import * as s from remix/data-schema import { signupSchema } from ./schemas.ts import { getIssueMessage, readSignupValues } from ../form-utils.ts async action({ db, formData, render, session, url }) { let result s.parseSafe(signupSchema, formData) if (!result.success) { return render( SignupPage error{getIssueMessage(result.issues)} values{readSignupValues(formData)} /, { status: 400 }, ) } let signup result.value // 成功后进入业务逻辑示例 demo 中查询/创建用户、写 session再 redirect 到结果页 }上面为了聚焦校验分支省略了 demo 里formAction、loginHref等与校验无关的 props完整写法见 signup 控制器。两个 helper 的作用getIssueMessage取第一条 issue 的message作为用户提示readSignupValues把已输入的name/email读回来让用户不用重填form-utils.tsexport function getIssueMessage(issues: ReadonlyArray{ message: string }): string { return issues[0]?.message ?? Please review the form and try again. }注意不要把密码、文件等敏感值原样回显到表单——示例里回显的只有name和email。成功时走redirect(...)章节文档说明为303重定向到结果页以避免刷新导致重复提交Forms and Mutations。运行示例并验证 400在 social-auth 示例里起服务用不合法的注册表单触发400确认失败分支真的返回400并回显表单cd demos/social-auth cp .env.example .env pnpm install pnpm db:reset pnpm start环境要求 Node 24.3.0package.json本地凭证流程只需SESSION_SECRET一个变量。启动后按 social-auth README 在 http://127.0.0.1:44100 打开。注册路由是form(/auth/signup)即GET /auth/signup展示表单、POST /auth/signup提交见 routes.ts。验证方式提交不合法的值例如password少于 8 个字符或email写成不符合邮箱格式响应状态应为400页面把表单重新渲染并显示第一条 issue 的 message。提交合法值则跳过400分支进入成功路径并redirect到结果页。适用边界本文只覆盖校验失败时回到表单这一路径登录、忘记密码、重置密码等其它表单在示例中复用的是同一套f.objectparseSafe400写法。请求 schema 只校验外部输入数据真正落到表时表级不变量由remix/data-table的validate/ 生命周期钩子负责二者应保持分离Data and Validation。【免费下载链接】remixThe fully-stacked web framework项目地址: https://gitcode.com/GitHub_Trending/re/remix创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考