rsuite 表单集成 Superstruct：使用 resolver 实现声明式运行时校验

前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本文面向希望在 rsuiteForm组件中接入 Superstruct 校验库的开发者完整讲解「resolver 模式」的接入方式从定义 schema、编写适配函数到在表单中启用校验与展示错误信息。读完本文你将掌握 rsuite 的resolver契约{ errors }结构、同步/异步行为、与model的优先级关系并能在自己的项目里直接复用文中的 Superstruct 集成方案。背景rsuite Form 的 resolver 机制rsuite 的Form组件除了内置基于 schema-typed 中给出了这一模式的定义resolver是一个函数接收当前表单值form value返回一个{ errors }对象errors中每个键是字段名field name对应值是错误消息errors为空对象{}表示表单校验通过。其类型定义位于 src/Form/resolvers.tsexport type ResolverV Recordstring, any, E Recordstring, any ( formValue: V, context?: any ) ResolverResultE | PromiseResolverResultE;即 resolver 可以是同步函数也可以是返回 Promise 的异步函数返回值或 resolve 值必须是{ errors }形状。Superstruct 集成示例完整可运行代码以下是官方文档 superstruct.md 中给出的完整示例它定义了一个包含用户名、邮箱、年龄三个字段的校验 schema并通过 resolver 接入 rsuite Formimport { Form, Button, Input } from rsuite; import { object, string, number, size, min, refine } from superstruct; const isEmail value /^[^\s][^\s]\.[^\s]$/.test(value); const schema object({ username: size(string(), 3, Infinity), email: refine(string(), email, value isEmail(value) || Invalid email address), age: min(number(), 18) }); const superstructResolver schema formValue { const errors {}; try { schema.assert({ ...formValue, age: Number(formValue.age) }); } catch (err) { for (const failure of err.failures()) { const key failure.path[0]; if (key !errors[key]) { errors[key] failure.message; } } } return { errors }; }; const TextField ({ name, label, ...rest }) ( Form.Group controlId{name} Form.Label{label}/Form.Label Form.Control name{name} accepter{Input} {...rest} / /Form.Group ); const App () { const handleSubmit values { alert(JSON.stringify(values, null, 2)); }; return ( Form resolver{superstructResolver(schema)} onSubmit{handleSubmit} formDefaultValue{{ username: , email: , age: }} fluid TextField nameusername labelUsername / TextField nameemail labelEmail / TextField nameage labelAge typenumber / Button appearanceprimary typesubmit Submit /Button /Form ); }; ReactDOM.render(App /, document.getElementById(root));逐段拆解schema 的定义与约束示例从superstruct包中导入了五个构造器object、string、number、size、min、refine。其中size(string(), 3, Infinity)要求 username 是字符串且长度至少为 3上限为无穷大refine(string(), email, ...)在 string 基础上追加自定义的 email 正则校验返回字符串时该字符串会作为错误消息min(number(), 18)要求 age 是数字且不小于 18。Superstruct 的核心特点是「声明式 组合式」每个字段用一个小型构造器描述类型与约束最后用object({ ... })组合成完整的表单 schema。这段定义本身与 React 无关可以在任何运行时校验场景复用。resolver 适配层把 Superstruct 错误映射为表单错误superstructResolver是一个高阶函数先接收 schema返回一个符合 rsuiteResolver契约的函数。适配层做了三件事类型归一化调用schema.assert({ ...formValue, age: Number(formValue.age) })前把输入框里拿到的字符串age显式转为Number以满足min(number(), 18)对数字类型的要求捕获校验异常Superstruct 的assert在数据不合法时抛出异常异常对象上带有failures()方法返回所有失败项的明细failure包含path与message错误映射取每个failure.path[0]作为字段名failure.message作为错误消息写入errors并用!errors[key]去重同一字段保留第一条失败消息。最终返回{ errors }空对象表示校验通过。这样 rsuite 就能把errors中的消息自动显示到对应Form.Control下方。表单侧resolver 的接入与运行规则Form resolver{superstructResolver(schema)} ...把适配好的 resolver 交给表单。rsuite 内部对 resolver 的处理逻辑在 src/Form/hooks/useFormValidate.ts 中值得关注的行为有优先级resolver存在时表单级校验check/checkAsync优先使用 resolver而不是model但Form.Control上的内联rule字段级校验仍然生效见 src/Form/Form.tsx 的 prop 文档说明同步 / 异步如果 resolver 返回 Promise同步的check()会立刻返回false并打印警告建议使用checkAsync()或依赖onSubmitonSubmit回调内部始终会awaitresolver因此示例中的同步 resolver 与提交流程都能正常工作错误合并与清除mergeResolverErrors会基于最新一次 resolver 结果保留仍非空的错误条目、删除已经校验通过的字段的错误保证表单在用户输入过程中动态更新错误状态。官方测试 src/Form/test/FormValidation.spec.tsx 的resolver prop分组覆盖了这些场景同步 resolver 校验失败/通过、异步 resolver 的checkAsync与onSubmit联动、字段变更时重新校验、错误清除以及check()遇到异步 resolver 时返回 false 并告警等可作为集成时的行为参考。字段渲染与默认值示例中的TextField是一个轻量封装用Form.Group controlId{name}建立 label 与控件的关联Form.Control通过name绑定字段并显式指定accepter{Input}Form.Control默认渲染 Input这里显式声明更清晰。typenumber让浏览器提供数字输入体验配合 resolver 内的Number(formValue.age)完成字符串到数字的转换。formDefaultValue{{ username: , email: , age: }}为受控表单提供初始值——注意 age 的默认值是空字符串这正好体现了「提交时再由 resolver 统一转换类型」的设计意图。运行环境与依赖版本该示例以ReactDOM.render(App /, document.getElementById(root))挂载说明它运行在浏览器端。文档页 form-resolvers/index.tsx 的sandboxDependencies中指定了示例沙箱使用的superstruct版本为^2.0.2本文代码基于该版本 API 编写assert、failures()、size/min/refine等。在自建项目中安装superstruct时建议使用 2.x 版本以保持 API 一致。小结rsuiteresolver契约非常简单输入表单值输出{ errors }Superstruct 负责声明式 schema 与错误明细rsuite 负责错误展示与交互联动关键适配点是schema.asserterr.failures()的错误映射以及输入值类型如数字字符串的显式转换。这种「第三方校验库 resolver 适配函数」的组合让团队既能保留 Superstruct 的声明式校验能力又能无缝获得 rsuite 表单的错误 UI、checkAsync、onSubmit等待等能力是 rsuite 表单校验体系中的推荐扩展路径。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite 表单接入 class-validator基于装饰器的声明式校验与 resolver 集成实战rsuite 表单接入 class validator基于装饰器的声明式校验与 resolver 集成实战 导读 本指南围绕 rsuite Form 的 r前端UI组件在 rsuite 表单中集成 io-ts 与 fp-ts基于 resolver 的运行时类型校验实战在 rsuite 表单中集成 io ts 与 fp ts基于 resolver 的运行时类型校验实战 本指南讲解如何在 rsuite Form 组件中通过前端UI组件RuboCop 1.30.0 版本全解析新增 Cop、--ignore-unrecognized-cops 与旧版 Ruby 兼容性修复RuboCop 1.30.0 版本全解析新增 Cop、 ignore unrecognized cops 与旧版 Ruby 兼容性修复 本指南围绕 RuboC前端UI组件上一篇终极指南MSYS2与MINGW-packages打造完美Windows开发环境 下一篇Bluebird Promise.join 实战指南固定数量并发 Promise 的高效协调方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考