共计 2588 个字符，预计需要花费 7 分钟才能阅读完成。
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 表单三