JSON生成Form表單（二）

JSON配置

JSON表單的配置分爲兩種，暫且稱描述表單信息的爲表單配置，描述表單組件信息的爲組件配置。JSON表單的配置必定是兩種配置的組合。

在開始講解配置以前先介紹幾個專業名詞：

1. 表單配置：描述表單信息的配置
2. 組件配置：描述表單組件信息的配置
3. 組件數據：表單組件對應須要展現的數據或者須要提交的數據
4. 邏輯數據：表單內用來控制邏輯的額外數據，不會被提交、緩存

表單配置

{
    formKey: 'test-form',
    className: 'test-form',
    realTimeSubmit: true,
    data: {
        // 表單數據
    },
    assistData: {
        // 邏輯數據
    },
    config: [
        // 組件配置
    ],
    style: {
        label: {},
        wrap: {}
    }
}

屬性	是否必傳	說明	類型	默認值
data	是	放置提交數據	object	-
config	是	放置組件配置	Array	-
formKey	否	自動本地緩存數據的localStorage的鍵，不傳表示不緩存	string	-
className	否	用來添加樣式	string	-
assistData	否	放置邏輯數據	object	-
realTimeSubmit	否	表單是否實時提交，通常用於篩選表單	boolean	false
style	否	控制表單組件了label和表單組件佈局樣式	object	-

style

style字段用來描述表單的佈局樣式，該字段既能夠在表單配置下，針對全部的表單組件有效，也能夠在組件配置下，只針對該表單組件有效，且能夠覆蓋表單配置下的style。

{
    formKey: 'test-form'
    ...
    style: {
        label: {
            fontSize: 12,
            width: 80,
            textAlign: 'left'
        },
        wrap: {
            display: 'inline-block',
            width: 300
        }
    }
}

好比在該style下，顯現出的表單是如下樣子：

組件配置

{
    type: 'input',
    dataKey: 'name',
    label: 'param',
    placeholder: '請輸入param',
    validate: ['required', /^[a-zA-Z_{}0-9]+$/g],
    style: {
        wrap: {
            display: 'inline-block',
            width: 270,
        }
    }
}

屬性	是否必傳	說明	類型	默認值
type	是	惟一標識表單組件類型，其值能夠爲：input、select、textarea、form_array、container以及一些自定義表單組件	string	-
dataKey	是	放置組件數據的key，能夠爲key1.key2.key3形式	string	-
label	否	表單組件的label	string	-
placeholder	否	表單組件的placeholder	string	-
validate	否	表單組件的校驗規則	Array	-
style	否	表單組件的佈局樣式，同表單配置中的style	object	-
options	否	表單組件爲select時，須要傳入的options數據	Array	-
render	否	當type爲container（自定義組件）時，render爲其渲染方法	Function	-
preventSubmit	否	當realTimeSubmit爲true時，preventSubmit控制該表單組件是否實時提交	boolean	false
children	否	當type爲form_array時，children表示子組件配置列表	Array	否
modifyDataFn	否	當爲自定義表單組件時，modifyDataFn能夠覆蓋render中提交數據的方法	Function	否
addItem	否	當type爲form_array時，點擊添加增長一項時，組件數據增長的項	object	-

組件栗子

{
    ...
    config: [
        {
            type: 'input',
            dataKey: 'param.name',
            label: 'Param',
            placeholder: '請輸入Param'
        }
    ]
}

上面的組件配置渲染出一個最簡單的表單組件，其效果以下：

可是這個組件還缺乏了數據校驗，如今爲這個組件加上校驗字段validate：

{
    ...
    config: [
        {
            type: 'input',
            ...
            validate: ['required', /^[a-zA-Z_{}0-9]+$/g]
        }
    ]
}

如今這個表單組件就能校驗該輸入值不能爲空，和只能爲數字、字母、下劃線。

validate

JSON表單的數據校驗和Ant Design、Element UI同樣，採用async-validator異步處理校驗方案，在JSON表單內部，將傳入validate字段解析爲async-validator的rules。其數組元素能夠爲String、Object、RegExp、Function。

1. 數組元素爲string，其值能夠爲：
    string，值必須爲string
    number，值必須爲數字 
    required，值不能爲空
    boolean，值必須爲布爾值
    integer，值必須爲整數形
    float，值必須爲浮點型
    email，值必須爲郵箱類型
2. 數組元素爲object，其值爲rules：
    {type: 'enum', enum: ['1', '2'], message: '值不在肯定範圍內'}
3. 數組元素爲RegExp, validate: [/^[a-zA-Z_{}0-9]+$/g]
4. 數組元素爲Function， validate: [ (rules, value, callback) => {}]

表單組件

目前JSON表單只支持五種表單組件，其中基礎表單組件：input、select、textare。複雜表單組件：form_array、container。

form_array組件

form_array組件主要是用來描述組件數據爲數組格式的表單組件，其示例以下：

{
    data: {
        value: [
            {
                name: '',
                descr: ''
            }
        ]
    },
    config: [
        type: 'form_array',
        label: 'values',
        dataKey: 'value',
        addItem: {
            name: '',
            descr: ''
        },
        children: [
            // 組件配置
            {
                type: 'input',
                dataKey: 'name',   // dataKey是基於父表單組件
                ...
            },
            ...
        ]
    ]
}

其效果圖以下：

JSON表單的container表單組件請看下節：JSON生成Form表單（三）