Drip-Form表单校验完全指南用JSON Schema轻松搭建3层健壮数据校验【免费下载链接】drip-form基于React和JSONSchema的动态表单解决方案项目地址: https://gitcode.com/gh_mirrors/dr/drip-formDrip-Form是一款基于 React 和 JSON Schema 的动态表单解决方案它把「表单渲染」和「数据校验」统一在一份配置里。本文将带你从零搭建3 层健壮的数据校验体系JSON Schema 静态校验、onValidate 异步校验、自定义校验帮助新手用最少的代码写出前后端都能复用的表单校验逻辑。一、为什么选 JSON Schema 做表单校验很多新手习惯用if/else手写校验逻辑字段一多就变成「校验代码泥潭」。Drip-Form 底层采用JSON Schema 规范 Ajv 校验引擎带来四大好处好处说明 格式统一一份配置描述数据格式避免冗余和错误数据提交 前后端复用校验规则就是 JSON后端可以直接拿来二次校验✍️ 少写代码长度、范围、正则、邮箱等常见校验声明即可⚡ 极速安全Ajv 会把 Schema 编译成超快的校验函数 想深入了解底层实现可阅读 packages/ajv/src/index.ts 中的 Ajv 封装源码。二、第 1 层JSON Schema 静态校验写一份配置校验所有字段静态校验是 3 层校验的「地基」覆盖 90% 的日常场景。只需在字段配置上声明关键字Drip-Form 就会自动完成校验并展示错误。1. 常用校验关键字速查表按数据类型分组对照着配置即可 数字number关键字作用示例minimum/maximum最小值 / 最大值maximum: 100exclusiveMinimum/exclusiveMaximum开区间边界排除边界值multipleOf必须是指定值的倍数multipleOf: 10rangeAjv闭区间范围range: [2, 4] 字符串string关键字作用示例minLength/maxLength最短 / 最长长度中英文各算 1 个字符pattern正则匹配pattern: ^[0-9]$format语义格式email、ipv4、date、url等一行搞定邮箱校验gbkLengthDrip Form区分中英文长度中文算 2、英文算 1 数组arrayminItems/maxItems限制个数uniqueItems保证唯一。 对象objectrequiredMsg指定必填项minProperties/maxProperties限制属性数量。完整关键字文档见 website/docs/form/use/validate/jsonSchema校验.md。2. 自定义关键字补齐业务场景JSON Schema 覆盖不了的场景Drip-Form 内置了两个自定义关键字源码见 packages/drip-form-plugin-keywords/src/keywords/gbkLength.tsgbkLength中文输入框按「中文2 位」计算长度注册昵称、简介类字段必备rangeDelimiter按分隔符拆分后校验每段长度适合多值输入。3. 用errMsg定制错误文案校验失败时提示什么用errMsg关键字为每个校验规则单独配置文案提示更友好、更专业{ type: string, minLength: 2, errMsg: { minLength: 用户名至少 2 个字符 } }三、第 2 层onValidate 异步校验用户名查重、接口校验「用户名是否已存在」这类问题前端拿不到答案必须调接口。Drip-Form 通过onValidateprop 为指定字段挂载异步校验函数支持3 种触发时机type触发时机适用场景click点击按钮触发手动「检测」按钮change表单数据改变时触发实时查重建议配合防抖submit点击提交时统一触发提交前批量校验DripForm unitedSchema{unitedSchema} onValidate{{ userName: { type: change, fn: async (val) { const res await checkUserName(val); // 调用你的接口 return res.exists ? 该用户名已被占用 : null; }, }, }} /⚠️ 小技巧在 Schema 中配置showError: change错误会在数据变化时即时展示体验更顺滑。详细文档见 website/docs/form/use/validate/异步校验.md校验 Hook 实现可查看 packages/hooks/src/useValidate.ts。四、第 3 层自定义校验特殊业务规则前两层都解决不了时比如「密码必须包含姓名拼音首字母」这种强业务规则就轮到自定义校验登场。Drip-Form 提供由浅入深的 3 种方案dispatch设置自定义错误推荐新手在自定义组件里把错误信息直接「派发」给表单表单统一收集并展示onValidate写同步校验函数与异步校验同款配置只是函数体换成同步业务逻辑自定义关键字 校验插件进阶把复杂规则沉淀为可跨业务复用的 Schema 关键字。// 自定义组件中数字大于 2 就报错 useEffect(() { dispatch( fieldData 2 ? { type: setErr, action: { set: { [fieldKey]: 数字不能大于2 } } } : { type: setErr, action: { deleteKeys: fieldKey } } ); }, [fieldData, dispatch, fieldKey]);完整方案对照见 website/docs/form/use/validate/自定义校验.md。五、三层校验如何协作一张表看懂层级校验内容配置位置典型场景1️⃣ JSON Schema 静态校验类型、长度、范围、正则、格式unitedSchema 字段配置必填、长度、邮箱格式2️⃣ onValidate 异步校验接口返回的合法性onValidateprop用户名查重、余额校验3️⃣ 自定义校验任意业务规则组件dispatch/ 自定义关键字跨字段业务规则三层从「格式正确」→「服务端合法」→「业务合规」层层递进共同构成健壮的表单数据防线。入口文档见 website/docs/form/use/validate/validate.md。六、新手避坑清单 ✅boolean 和 null 类型没有校验关键字别浪费配置时间minLength不区分中英文中文1需要区分请用gbkLength异步校验fn返回错误文案即报错返回 null/不返回即通过对 UI 有强要求、或校验逻辑会被多个表单复用的场景建议封装成自定义组件内实现而不是依赖onValidate。三层校验体系搭建完成后你的表单将同时具备「格式统一、提示友好、前后端一致」三大特性。动手试试吧【免费下载链接】drip-form基于React和JSONSchema的动态表单解决方案项目地址: https://gitcode.com/gh_mirrors/dr/drip-form创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考