JSON生成Form表单（二）

bang590 发布于2019-08-23 13:38 / 2270人阅读

摘要：配置表单的配置分为两种，暂且称描述表单信息的为表单配置，描述表单组件信息的为组件配置。组件组件主要是用来描述组件数据为数组格式的表单组件，其示例如下组件配置是基于父表单组件其效果图如下表单的表单组件请看下节生成表单三

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表单判断

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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