JSON生成Form表單（二）

bang590 發布于2019-08-23 13:38 / 2185人閱讀

摘要：配置表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。組件組件主要是用來描述組件數據為數組格式的表單組件，其示例如下組件配置是基于父表單組件其效果圖如下表單的表單組件請看下節生成表單三

JSON配置

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

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

表單配置：描述表單信息的配置

組件配置：描述表單組件信息的配置

組件數據：表單組件對應需要展示的數據或者需要提交的數據

邏輯數據：表單內用來控制邏輯的額外數據，不會被提交、緩存

表單配置

{
    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表單（三）

GPU云服務器云服務器 form表單提交json form表單校驗 form表單插件 form表單判斷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99311.html

JSON生成Form表單（一）

摘要：介紹表單是一個基于的抽象組件，它能將格式的配置渲染為一個表單，在實際項目中，通過它可以快速的搭建出一個表單頁，這在端項目中，有著很廣泛的用途。如何使用表單的地址為。介紹 JSON表單是一個基于React的抽象組件，它能將JSON格式的配置渲染為一個Form表單，在實際項目中，通過它可以快速的搭建出一個表單頁，這在B端項目中，有著很廣泛的用途。 JSON表單的優點有以下幾點：可以快...

qpal 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單（四）

摘要：表單實例方法靜態方法表單有一個靜態方法方法時表單的靜態方法，用來引入抽象出來的表單組件。首先需要開啟實時表單提交，在表單配置中設置為。到目前為止，表單適合大部分的表單應用場景。 JSON表單實例方法靜態方法 json表單有一個靜態方法：createCustomComp import Form from json_transform_form import components fro...

Richard_Gao 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單（三）

摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時直接通過組件配置去渲染無疑能節約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實例方法請看下節的生成表單四 container表單組件在實際的項目中，JSON表單提供的表單組件是遠遠不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...

Half 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單

摘要：是校驗表單組件數據正確性的字段，其值為數組，里面的數組元素可以為。所以數組元素如果為的話，其內容就是的。到目前為止，表單適合大部分的表單應用場景。 JSON表單描述 JSON表單是一個基于React的抽象組件，它可以把JSON數據格式描述的表單轉換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優點是：可以快速構建出一個表單表單的數據、邏輯、視圖分...

bingchen 2019-08-26 13:22 評論0 收藏0
自定義表單生成器form-create v2介紹

摘要：介紹是一個可以通過生成具有動態渲染數據收集驗證和提交功能的表單生成器。并且支持生成任何組件。結合內置種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。介紹 form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。文檔 | git...

lufficc 2019-08-23 18:16 評論0 收藏0