Vue基于JSON Schema生成表单和校验

发表于

基于 JSON Schema 定义数据结构，生成对应的表单，支持自定义输入组件和节点组件渲染，支持自定义错误提示配置和校验规则。

生成表单如下图：
vue-json-schema-form

JSON Schema 是什么

JSON Schema 定义了一套规范用于描述你的数据格式，包含对数据结构的描述和约束等。各种开发语言都有相应的类库实现对schema的校验支持。

一个 JSON Schema 的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "required": [
        "userName"
    ],
    "properties": {
        "userName": {
            "type": "string",
            "title": "UserName",
            "default": "Name"
        },
        "age": {
            "type": "integer",
            "title": "Age",
            "maximum": 80,
            "minimum": 16
        },
        "bio": {
            "type": "string",
            "title": "Bio",
            "minLength": 10
        }
    },
    "additionalProperties": false
}

如上 schema 描述了一个 object

  • 包含 userName、age、bio 三个属性
  • userName 为 string 类型且必须定义
  • age 为 integer 类型且在 16 到 80 之间
  • bio 为不小于 10 个长度的 string

√ 正确的例子

1
2
3
4
{
    userName: 'name',
    age: 18
}

× 错误的例子 - (bio 长度不小于10个)

1
2
3
4
5
{
    userName: 'name',
    age: 18,
    bio: '嘿嘿嘿'
}

了解更多可以查看JSON Schema官方文档：https://json-schema.org/understanding-json-schema/index.html

JSON Schema的表单生成

通过 JSON Schema 生成form表单，数据校验校验基于 ajv，只需要一个必须的 schema 参数即可生成完整可校验的form表单。

  • JSON Schema title 属性作为 form表单的标题
  • JSON Schema description 属性作为表单的描述
  • 可通过 uiSchema 配置个性化的视图显示
  • 可通过 errorSchema 配置表单校验错误文案
  • 支持多语言
  • 支持自定义组件
  • …

目前版本依赖 elementUi ，后续会解耦开，配置化适配各种ui库
详细的说明文档可以这里查看，vue-json-schema-form 文档
实现思想借鉴 react-json-schema-form

一个简单的用户信息录入例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
import VueForm from '@lljj/vue-json-schema-form';

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    }
                }
            }
        };
    }
};
</script>

表单渲染流程大致如下图，基于组件递归的形式，逐级渲染（点击放大）

vue-json-schema-form

JSON Schema表单所解决的问题

遵循 JSON Schema 规范，可以很方便的做到跨端数据校验，这在处理一些前端可视化编辑的场景是非常有用的。

比如：

  1. 在我们做一个可视化的活动编辑页时，当你在新增一个活动版块时，需要 板块配置信息录入、板块预览组件、服务端配合做数据校验 这三个部分。
  2. 开发者重点关注 模块预览组件 也就是新增的模块长什么样，这里使用 JSON Schema 生成表单可以很好的解决 板块配置信息录入、服务端配合做数据校验 这两个问题。
  3. 新增版块定义好 JSON Schema 数据即可生成配置表单，同时把 JSON Schema 给到后端系统即可做到服务端数据校验（这一步可以在构建或者发布流程环节来推给后端）

最后：

我在 github 项目仓库中包含了一个开箱即用的 Demo展示，演示效果：vue-json-schema-form活动编辑器