JSON生成Form表单(二)

本文详细介绍了JSON表单配置的组成,包括表单配置和组件配置。解释了各种配置属性的作用,如dataKey、label、placeholder等,并展示了如何使用validate进行数据校验,以及form_array和container组件的用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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表单是否实时提交,一般用于筛选表单booleanfalse
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表单组件的labelstring-
placeholder表单组件的placeholderstring-
validate表单组件的校验规则Array-
style表单组件的布局样式,同表单配置中的styleobject-
options表单组件为select时,需要传入的options数据Array-
render当type为container(自定义组件)时,render为其渲染方法Function-
preventSubmit当realTimeSubmit为true时,preventSubmit控制该表单组件是否实时提交booleanfalse
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表单(三)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值