JSON生成Form表单的方法示例

json表单描述

json表单是一个基于react的抽象组件，它可以把json数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成form表单。

json表单的优点是：

• 可以快速构建出一个表单
• 表单的数据、逻辑、视图分离，方便抽离和进一步抽象
• 提供校验、自动缓存等额外功能，提升录入体验
• 可以跨项目的共用复杂的表单组件

原始表单的缺点

1：代码量庞大，开发效率低
每次开发一个表单页的时候，都需要重复编写表单组件及其交互事件的代码，这块代码重复编写且与主线业务逻辑无关，除此之外，表单的校验、缓存等额外功能，也需要不少的代码量，这样就造成了一个表单页的代码量庞大。

2：不便于抽离和进一步的抽象
在一个表单页内，往往会将表单数据、表单组件、控制逻辑杂糅在一起，当发现某一个子功能在很多场景下都需要用到的时候，想把该子功能拆分出来发现并不容易，因为逻辑、数据、视图的杂糅，导致想把子功能不受影响的剔除出来需要很仔细的检查，这样就导致功能的抽离和抽象的不便

3：维护成本高
这个和第二个问题是同样的原因，这也是我的亲身经历，当我在项目中想优化一个小功能的时候，发现不仅把之前的逻辑改没了，还引出了不少的bug，这导致在一个逻辑很复杂的表单里，维护变成了一件高危工作。

4：需要额外处理校验和缓存等功能

一个栗子

const config = {
  formkey: 'example-form',
  data: {
    name: '',
    descr: '',
    typename: ''
  },
  config: [
    {
      type: 'input',
      datakey: 'name',
      label: 'param',
      placeholder: '请输入param',
      validate: ['required', /^[a-za-z_{}0-9]+$/g],
      style: {
        display: 'inline-block',
        width: 270,
      },
    },
    {
      type: 'select',
      datakey: 'typename',
      options: ['string', 'integer', 'float'],
      style: {
        display: 'inline-block',
        width: 100,
        margin: '0 15px'
      },
      validate: [{type: 'required', message: 'param类型不能为空'}]
    },
    {
      type: 'textarea',
      datakey: 'descr',
      placeholder: '请输入param含义',
      label: 'param含义',
      validate: ['required'],
      style: {
        width: 385,
      }
    },
  ]
}

<from ref={ref => this.formwrap = ref} config={config}></from>

上面是用json描述的三个常用的表单组件组合成的表单，其效果图如下：

json表单的格式

{
  formkey: 'paramaddform',
  data: {},
  config: []
}

属性	是否必传	说明	类型	默认值
formkey	否	用来自动缓存，localstorage的key，不传表示不自动缓存	string	-
classname	否	用来添加一些自定义样式	string	-
data	是	表单的提交数据，有自动缓存和校验功能	object	-
assisdata	否	用于表单控制逻辑的额外数据	object	-
config	是	组件配置，表单组件的配置	array	-
realtimesubmit	否	表单是否实时提交，一般用于筛选表单	boolean	false

表单组件的配置

{
  type: 'input',
  datakey: 'name',
  label: 'param',
  validate: ['required'],
  style: {}
}

属性	是否必传	说明	类型	默认值
type	是	表单组件的类型，其值可以为: input、select、textarea、form_array、container和一些自定义表单组件	string	-
datakey	否	指定表单组件值的key，可以为param.name.firstname形式	string	-
label	否	表单组件的label	string	-
placeholder	否	表单组件的placeholder	string	-
validate	否	表单组件的校验规则	array	-
style	否	表单组件的布局样式	string	-
options	否	当表单组件为select时，需要传入的options	array	-
render	否	当type为container时，为自定义组件，render为渲染方法	function	-
preventsubmit	否	当realtimesubmit为true时，控制当前表单组件是否实时提交	boolean	false
children	否	当type为form_array时，children表示子组件配置列表	array	-
modifydatafn	否	当type为自定义组件时，且需要覆盖render方法中的提交数据方法，可以使用modifydatafn来重新自定义提交数据	function	-

关键字段解释

1. type

type是用来唯一表示表单组件类型的字段，其中json表单提供了三种默认的表单组件：input、select、textarea，还有两种复杂类型的表单组件：form_array、container。

form_array表单组件表示其数据结构为array，含有增加项删除项的复合表单组件，该表单组件的配置里多一个children的字段，里面是每一项里面的表单组件配置的集合，其表单组件的效果如下图所示：

container是用来自定义表单的接口，具体用法参考下面具体的介绍。

2. validate

validate是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为string、object、regexp、function。

json表单采用的是async-validator异步处理校验，在json表单内部会将validate传入的校验关键字解析为async-validator的rules。所以validate数组元素如果为object的话，其内容就是async-validator的rules。

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) => {}]

3. style

用来确定表单组件在表单内的布局样式，比如想让表单组件行内显示，且宽度为200，其style值如下：

{
  display: 'inline-block',
  width: 200
}

container表单组件

container表单组件是用来自定义表单组件的，它主要的作用有以下几点：

• 添加表单组件库，例如ant-design
• 自定义表单组件，例如图片上传组件
• 用来构建复杂的表单组件
• 处理控制逻辑和联动逻辑

使用栗子

import { input, select } from 'antd'
const option = select.option
{
  type: 'container',
  datakey: 'descr',
  style: {
    display: 'inline-block',
    width: 100,
    margin: '0 15px'
  },
  options: ['string', 'integer', 'float'],
  render: (curdata, config, {changefn, getfocus, losefocus, error}) => {
    return <select value={curdata} 
      style={{width: '100%', height: 35}} 
      onmouseenter={getfocus}
      onchange={(value) => changefn(value, () => {
        losefocus()
      })}>
      {
        config.options && config.options.map((item, idx) => <option key={idx} value={item}>{item}</option>)
      }
    </select>
  }
},

container表单组件只是多一个render渲染方法，里面可以自定义表单组件的渲染内容，render方法提供如下参数：

1. curdata: 当前container组件的值，跟datakey相关
2. config: 当前container组件的配置
3：{changefn, changedatafn, getfocus, losefocus, error, jsonform}
changefn, changdatafn是提交数据的方法，changefn只能修改当前组件datakey的值，changedatafn可以修改data中任意字段的值，changefn(value, [callback]), changefn(datakey, value, [callback])
getfocus，losefocus是自定义处理校验的字段，losefocus是开始校验，getfocus是去掉校验的报错信息
error是校验结果的报错信息
jsonform是在container中使用json表单的组件配置用来生成新的表单组件，意思里container中依然可以嵌套表单组件。

使用antd的组件库

josn表单只提供了input、select、textarea三种默认的表单组件，远远不够真实的项目中使用，所以我们可以将antd组件库中的组件封装到json表单中，这样我们就可以再项目中很快的使用antd中的组件。

antd-components.js

import react from 'react'
import { input } from 'antd'
export default [
  {
    type: 'antd-input',
    render: (curdata, config, {changefn, getfocus, losefocus, error}) => {
      return <input value={curdata} 
        onfocus={getfocus}
        onblur={losefocus}
        placeholder={config.placeholder ? config.placeholder : ''}
        style={{bordercolor: !!error ? '#f5222d' : ''}}
        onchange={event => changefn(event.target.value)} />
    }
  }
]

我们在antd-components.js文件中声明一个antd-input的自定义组件，然后在json表单中引入该自定义表单组件：

init.js

import form from 'form'
import components from './antd-components'
from.createcustomcomp(components)

const config = {
  formkey: 'paramaddfromantd',
  data: {
    name: '',
  },
  config: [
    {
      type: 'antd-input',
      datakey: 'name',
      label: 'param',
      placeholder: '请输入param',
      validate: ['required', /^[a-za-z_{}0-9]+$/g]
    }
  ]
}
<from ref={ref => this.formwrap = ref} config={config}></from>

使用container来引入antd组件库，其原理就是通过container将antd组件封装成'antd-input'自定义组件，然后使用它，这种方式不仅可以用来封装组件库，还可以用来共享一些共用表单组件，可以将常用的复杂表单组件封装在一个共用文件里，然后在不同项目中引用，就可以跨项目共用表单组件。

在自定义组件中，如果需要自定义表单提交数据函数，但是又不能重写render方法以防覆盖原先的render方法，所以可以使用modifydatafn方法来覆盖render中的提交数据部分。

modifydatafn: ({changefn, changedatafn}, {parent, self}) => {
  let {parentdata} = parent
  parentdata = parentdata.map(item => ({
    ...item,
    name: self.curdata
  }))
  changedatafn(parent.parentkey, parentdata)
}

处理控制逻辑和联动逻辑

在json表单json配置中，有assistdata的选填字段，该字段为json表单处理控制逻辑的额外数据，例如在表单内有一个刷新按钮，其实现代码如下：

{
  data: {},
  assistdata: {
    refreshparam: false
  },
  config: [
    {
      type: 'container',
      datakey: 'assistdata.refreshparam',
      render: (curdata, config, {changefn, changedatafn}) => {
        const handleclick = () => {
          changedatafn('assistdata.refreshparam' ,true)
          settimeout(() => {
            changedatafn('assistdata.refreshparam' ,false)
          }, 1000 * 3)
        }
        return <react.fragment>
          {
            config.index === config.parentdata.length - 1 &&
            <popover placement="top" content="刷新param列表">
              <button shape="circle" loading={curdata} onclick={handleclick}>{!curdata && <icon type="reload" />}</button>
            </popover>
          }
        </react.fragment>
      }
    },
  ]
}

注意： 如果要使用assistdata中的数据，其datakey必须以assistdata开头，且必须使用changedatafn自定义提交assistdata数据。

render方法内嵌套组件配置

{
  type: 'container',
  datakey: 'param',
  render: (curdata, config, {changefn, changedatafn, jsonform}) => {
    return <div>
      {
        jsonform([
          {
            type: 'input',
            datakey: 'name',
            placeholder: '请输入param',
            validate: ['required'],
          }
        ])
      }
    </div>
  }

这样就可以在container内嵌套组件配置，实现更复杂的表单组件。

json表单提交数据

非实时表单提交

非实时表单提交数据，就是在表单输入完毕后，点击提交按钮统一提交所有的数据，其提交的方式如下：

function handleclick() {
  this.formrefs.getvalue((valid, data) => {
    // valid 表示校验结果，false表示校验不通过
  })
}

实时表单提交

实时表单的提交首先需要注册提交函数：

componentdidmount(){
  this.formrefs.registersubmit((valid, data) => {
    console.log(valid, data)
  })
}

接着在配置里设置允许实时提交的字段：

{
  formkey: '',
  realtimesubmit: true
}

如果需要在某些表单组件里自定义是否实时提交，需要在组件配置里设置阻止实时提交字段为true：

{
  datakey: '',
  preventsubmit: true
}

json表单的应用场景

表单分类

a. 按复杂度分类
1. 简单表单：表单组件为input、select、textarea等常见的几种，且表单组件之间逻辑独立
2. 复杂表单：表单组件内容和交互复杂且相互之间存在复杂的逻辑

其中复杂表单又可以分为：
1. 联动表单，上一个表单组件会影响接下来表单的值
2. 实时表单，表单组件的事件会触发表单的实时提交，例如筛选表单
3. 富控制表单，表单内部含有很多的控制逻辑

json表单最适合的应用场景是简单表单，它可以用极少的代码，快速的构建出表单来，对于复杂类型的表单，json表单需要使用container来构建复杂的表单组件、处理复杂的控制逻辑，其代码量优势虽然并不明显，但是json表单可以使其代码清晰，将表单组件和表单逻辑彻底解耦，便于抽离和维护，便于共享常用组件，也带来不少的好处。

到目前为止，json表单适合大部分的表单应用场景。

json表单解决的问题

• 减少了表单代码量，不需要重复的开发表单组件，只需要输入组件配置即可
• 将表单组件和数据解耦，便于子功能的拆分和常用组件的共享
• 简化了校验功能，只需要传入validate字段即可
• 添加了自动缓存功能

在我的项目，我尝试了使用原始表单和json表单两种方式来实现同一个表单页，原始表单我编写了600多行的代码，而在json表单中，只有不到150行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。