Vue3页面级渲染引擎vue-juan-form发布,Schema驱动表单校验支持多规则组合

基于 Vue 3 的开源表单渲染库 vue-juan-form 正式推出,通过 Schema 配置实现页面级动态渲染与灵活校验。该方案支持 Element Plus 组件按需引入,校验规则以字符串形式...

互联网/IT 阅读量: 8331

近期,一个面向 Schema 编程的 Vue 3 表单渲染方案——vue-juan-form 在社区引发关注。该项目旨在解决低代码平台与复杂业务系统中表单构建与校验逻辑耦合过重的问题,通过声明式 Schema 配置驱动页面渲染与验证行为,降低开发复杂度并提升可维护性。

与传统手写表单组件不同,vue-juan-form 将整个表单结构抽象为层级化的 JSON Schema,开发者只需定义字段属性、类型、布局及校验规则,即可自动生成完整表单界面。其核心设计思路是“配置即代码”,将 UI 层与业务逻辑解耦,适用于需要快速迭代表单形态的中后台系统或低代码平台。

从上述 schema 可见,字段校验规则以字符串形式声明,多个规则用 | 分隔,参数用 : 指定,如 min:18|max:60 表示年龄范围限制;正则校验直接内联表达式,如 matches:/^1[3-9]\d{9}$/ 验证手机号格式。这种语法设计兼顾了可读性与扩展性,开发者可轻松新增自定义校验器。

校验触发机制遵循现代表单交互规范:初始化时不显示错误提示;用户编辑某字段时,仅对该字段进行即时校验并反馈;点击提交按钮(需设置 nativeType: 'submit')时,触发全表单校验;重置操作调用 form.reset() 清空数据与错误状态。

布局方面,schema 中 children 代表行级结构,每行默认 16 栅格,字段 col 默认为 auto,即均分剩余空间;也可手动指定 col 值实现自定义列宽。按钮等操作控件可通过嵌套 Html 类型组件组织,支持内联样式与事件注入,灵活性较强。

值得注意的是,该方案并未重新造轮子,而是深度集成现有生态。其底层仍依赖 Element Plus 的 Input、Button 等组件,仅封装了统一的渲染与校验调度逻辑。这意味着开发者无需学习全新 API,即可获得标准化表单能力。同时,由于采用 Composition API +