成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JSON生成Form表單（二）

bang590 / 2216人閱讀

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

JSON配置

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

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

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

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

組件數(shù)據(jù)：表單組件對應(yīng)需要展示的數(shù)據(jù)或者需要提交的數(shù)據(jù)

邏輯數(shù)據(jù)：表單內(nèi)用來控制邏輯的額外數(shù)據(jù)，不會被提交、緩存

表單配置 
{
    formKey: "test-form",
    className: "test-form",
    realTimeSubmit: true,
    data: {
        // 表單數(shù)據(jù)
    },
    assistData: {
        // 邏輯數(shù)據(jù)
    },
    config: [
        // 組件配置
    ],
    style: {
        label: {},
        wrap: {}
    }
}
屬性 是否必傳 說明 類型 默認值
data 是 放置提交數(shù)據(jù) object -
config 是 放置組件配置 Array -
formKey 否 自動本地緩存數(shù)據(jù)的localStorage的鍵，不傳表示不緩存 string -
className 否 用來添加樣式 string -
assistData 否 放置邏輯數(shù)據(jù) 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下，顯現(xiàn)出的表單是以下樣子：

組件配置 
{
    type: "input",
    dataKey: "name",
    label: "param",
    placeholder: "請輸入param",
    validate: ["required", /^[a-zA-Z_{}0-9]+$/g],
    style: {
        wrap: {
            display: "inline-block",
            width: 270,
        }
    }
}
屬性 是否必傳 說明 類型 默認值
type 是 唯一標(biāo)識表單組件類型，其值可以為：input、select、textarea、form_array、container以及一些自定義表單組件 string -
dataKey 是 放置組件數(shù)據(jù)的key，可以為key1.key2.key3形式 string -
label 否 表單組件的label string -
placeholder 否 表單組件的placeholder string -
validate 否 表單組件的校驗規(guī)則 Array -
style 否 表單組件的布局樣式，同表單配置中的style object -
options 否 表單組件為select時，需要傳入的options數(shù)據(jù) Array -
render 否 當(dāng)type為container（自定義組件）時，render為其渲染方法 Function -
preventSubmit 否 當(dāng)realTimeSubmit為true時，preventSubmit控制該表單組件是否實時提交 boolean false
children 否 當(dāng)type為form_array時，children表示子組件配置列表 Array 否
modifyDataFn 否 當(dāng)為自定義表單組件時，modifyDataFn可以覆蓋render中提交數(shù)據(jù)的方法 Function 否
addItem 否 當(dāng)type為form_array時，點擊添加增加一項時，組件數(shù)據(jù)增加的項 object -
組件栗子 
{
    ...
    config: [
        {
            type: "input",
            dataKey: "param.name",
            label: "Param",
            placeholder: "請輸入Param"
        }
    ]
}

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

但是這個組件還缺少了數(shù)據(jù)校驗，現(xiàn)在為這個組件加上校驗字段validate：

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

現(xiàn)在這個表單組件就能校驗該輸入值不能為空，和只能為數(shù)字、字母、下劃線。

validate

JSON表單的數(shù)據(jù)校驗和Ant Design、Element UI一樣，采用async-validator異步處理校驗方案，在JSON表單內(nèi)部，將傳入validate字段解析為async-validator的rules。其數(shù)組元素可以為String、Object、RegExp、Function。

1. 數(shù)組元素為string，其值可以為：
    string，值必須為string
    number，值必須為數(shù)字 
    required，值不能為空
    boolean，值必須為布爾值
    integer，值必須為整數(shù)形
    float，值必須為浮點型
    email，值必須為郵箱類型
2. 數(shù)組元素為object，其值為rules：
    {type: "enum", enum: ["1", "2"], message: "值不在確定范圍內(nèi)"}
3. 數(shù)組元素為RegExp, validate: [/^[a-zA-Z_{}0-9]+$/g]
4. 數(shù)組元素為Function， validate: [ (rules, value, callback) => {}]
表單組件

目前JSON表單只支持五種表單組件，其中基礎(chǔ)表單組件：input、select、textare。復(fù)雜表單組件：form_array、container。

form_array組件

form_array組件主要是用來描述組件數(shù)據(jù)為數(shù)組格式的表單組件，其示例如下：

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

其效果圖如下：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99311.html

相關(guān)文章

  • JSON生成Form表單（一）

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

    qpal 評論0 收藏0

  • JSON生成Form表單（四）

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

    Richard_Gao 評論0 收藏0

  • JSON生成Form表單（三）

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

    Half 評論0 收藏0

  • JSON生成Form表單

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

    bingchen 評論0 收藏0

  • 自定義表單生成器form-create v2介紹

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

    lufficc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<