antd vue form 手動校驗_Vue基于JSON Schema生成表單和資料校驗

基于

JSON Schema

定義資料結構，生成對應的表單，支援自定義元件，支援自定義錯誤提示配置和校驗規則...

• 使用場景：可視化活動編輯器
• 源碼：vue-json-schema-form github
• 文檔：vue-json-schema-form 文檔
• 示範表單：vue-json-schema-form 示範表單

生成表單如下圖：

JSON Schema 是什麼

JSON Schema

定義了一套規範用于描述你的資料格式，包含對資料結構的描述和限制等。各種開發語言都有相應的類庫實作對schema的校驗支援。

一個

JSON Schema

的例子：

{
    "$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

√ 正确的例子

{
    userName: 'name',
    age: 18
}
           

× 錯誤的例子 - (

bio

長度不小于10個)

{
    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

表單渲染流程大緻如下圖，基于元件遞歸的形式，逐級渲染（點選放大）

一個簡單的使用者資訊錄入例子：

<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>
           

JSON Schema表單所解決的問題

遵循

JSON Schema

規範，可以很友善的做到跨端資料校驗，這在處理一些前端可視化編輯的場景是非常有用的。

比如：

1. 在我們做一個可視化的活動編輯頁時，當你在新增一個活動版塊時，需要

   闆塊配置資訊錄入

   、

   闆塊預覽元件

   、

   服務端配合做資料校驗

   這三個部分。
2. 開發者重點關注

   子產品預覽元件

   也就是新增的子產品長什麼樣，這裡使用

   JSON Schema

   生成表單可以很好的解決

   闆塊配置資訊錄入

   、

   服務端配合做資料校驗

   這兩個問題。
3. 新增版塊定義好

   JSON Schema

   資料即可生成配置表單，同時把

   JSON Schema

   給到後端系統即可做到服務端資料校驗（這一步可以在建構或者釋出流程環節來推給後端）

最後：

我在 github 項目倉庫中包含了一個開箱即用的 Demo展示，示範效果：vue-json-schema-form活動編輯器

歡迎star或讨論