JSON Schema会针对这6种数据类型进行各种各样的约束。JSON Schema本身也是一种JSON数据,也要遵循JSON格式。 01 最外层字段 type可选值: 例子: 符合要求的JSON: array常用属性: 例子: 符合要求的JSON: number常用属性: 例子: 符合要求的JSON: 在number中没有等于的约束,那怎么解决呢?答案:minimum和maximum同一个...
新增版块定义好JSON Schema数据即可生成配置表单,同时把JSON Schema给到后端系统即可做到服务端数据校验(这一步可以在构建或者发布流程环节来推给后端) 最后: 我在github 项目仓库中包含了一个开箱即用的 Demo展示,演示效果:vue-json-schema-form活动编辑器 欢迎star或讨论...
# 只运行 表单Schema生成器 yarn run demo:dev --dir=schema-generator # 只运行(H5)活动编辑器 yarn run demo:dev --dir=vue-editor 说明 遵循JSON Schema规范,只需要给定JSON Schema,即可生成对应的form表单 快速配置个性化ui视图和校验错误信息,可适配常用的ui库,目前的版本默认视图依赖elementUi 表单schema校...
npm install --save @lljj/vue-json-schema-form element-ui 或者: yarn add @lljj/vue-json-schema-form <template><VueFormv-model="formData":ui-schema="uiSchema":schema="schema"></VueForm></template>// 使用 import VueForm from '@lljj/vue-json-schema-form'; import Vue from 'vue'; impo...
表单从来没有这么简单,通过一份 json-schema,你就拥有了一套交互完整,校验完善的表单。 demo 演示 USAGE npm i @zdwh/vue-json-schema-form -S 然后 importJsonSchemaFormfrom'@zdwh/vue-json-schema-form'importJsonSchemaFormThemeElementfrom'@zdwh/vue-json-schema-form/dist/theme-element/index.common.js'...
ajv:ajv是JSONSchema校验器 支持最新的规范 $ref、const keyword、$data reference规则可以更好复用一些基础规则,同时完成类似于「密码、重复密码」等复杂校验 addFormat()、addKeyword()可以扩展规则,更容易实现自定义校验 ajv-errors扩展了JSON Schema,支持自定义错误输出 ...
JSON Schema|Vue 在做前端可视化编辑时,为了解决数据配置表单的通用性,所以使用JSON Schema描述数据结构,动态生成表单。 这样做的好处除了解决在每个配置表单的重复工作,服务端也可以基于同一份schema保持和前端一致的校验规则,不过对于使用 vue elementUi并未找到合适库可以直接使用,所以在后面一段时间决定自己实现一个 ...
统一的校验逻辑: JSON Schema 从上述前端和后端校验的伪代码中,可以看出二者的校验规则虽然一致,但是写法大不相同,那有没有一种统一的 Schema 即可作用于前端,又可作用于后端。 有,这就是 JSON Schema。 JSON Schema 基于 JSON 进行数据校验格式,并附有一份规范 json-schema.org,各种服务器编程语言都对规范进行...
A json-schema editor of high efficient and easy-to-use, base on Vue & Element UI. 一个高效易用的基于 Vue + Element UI 的 json-schema 编辑器。 模仿 Yapi React 版本json-schema-editor-visual实现 Usage importJsonSchemaEditorfrom'vue-json-schema-editor-visual';Vue.use(JsonSchemaEditor); ...
基于Vue/Vue3,Json Schema 和 ElementUi/antd/iview3/naiveUi 等生成 HTML Form 表单,用于活动编辑器、h5编辑器、cms等数据配置;支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3/naiveUi - lljj-x/vue-json-schema