如何打造一个通用表单生成器组件系统？

睡不着先生
266 阅读3分钟

🧩 如何打造一个通用表单生成器组件系统？

💡 一个注册页的表单你可能能写得很好，但你能不能构建一个通用的表单系统，适配几十个页面、几百种配置，支持校验、联动、动态字段？这，就是前端高级工程能力的体现。

🎯 为什么需要表单生成器？

日常开发中，表单是前端的高频需求之一：

  • 登录注册、信息填写、数据编辑、筛选搜索、审批流……
  • 表单样式/字段重复率高，逻辑重复率更高

但如果你是这样写的 👇

<Form>
  <Form.Item label="用户名">
    <Input />
  </Form.Item>
  <Form.Item label="性别">
    <Select options={['男', '女']} />
  </Form.Item>
</Form>

那你就要面对：

  • 🤯 每个页面重复写 UI
  • 🧹 重复写校验逻辑
  • 🤕 新需求改 20 个表单文件

✅ 目标：一套 JSON + 表单引擎，通吃全场

理想形态是：

<FormRenderer
  schema={[
    { type: 'input', label: '用户名', name: 'username', required: true },
    { type: 'select', label: '性别', name: 'gender', options: ['男', '女'] },
    { type: 'date', label: '出生日期', name: 'dob' },
  ]}
  onSubmit={handleSubmit}
/>

🧠 优点：

  • ✅ 统一管理字段类型、校验、UI 结构
  • ✅ 动态控制字段（联动、隐藏、禁用）
  • ✅ 配合后端配置表单（低代码、可视化）

🧱 一、核心设计思路

🧩 每一个字段 = 一个“配置项”对象

{
  type: 'input',
  label: '用户名',
  name: 'username',
  required: true,
  placeholder: '请输入用户名',
  rules: [{ required: true, message: '必填项' }],
  props: { clearable: true }
}
字段作用
type表单类型，如 input/select/date
label字段标题
name字段标识，用于表单值收集
rules校验规则，支持 Yup、AntD Rule、AJV
props透传给组件的 props，如 placeholder、clearable

🧩 UI 渲染层 = 字段类型 → 组件映射

const widgetMap = {
  input: Input,
  select: Select,
  date: DatePicker,
  checkbox: CheckboxGroup,
  custom: CustomComponent, // 支持扩展
};

通过 type 渲染对应组件，动态组合渲染 UI。

🛠 二、实现一个简易版通用表单渲染器

✅ 基础结构（以 React 为例）

function FormRenderer({ schema = [], onSubmit }) {
  const [form] = Form.useForm();

  return (
    <Form form={form} onFinish={onSubmit}>
      {schema.map(item => {
        const Comp = widgetMap[item.type];
        return (
          <Form.Item
            key={item.name}
            name={item.name}
            label={item.label}
            rules={item.rules}
          >
            <Comp {...item.props} />
          </Form.Item>
        );
      })}
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

✅ 使用示例：

const formSchema = [
  { type: 'input', label: '用户名', name: 'username', required: true },
  { type: 'select', label: '性别', name: 'gender', options: ['男', '女'] },
  { type: 'date', label: '生日', name: 'birth' }
];

<FormRenderer schema={formSchema} onSubmit={console.log} />

🚦 三、功能增强思路

1️⃣ 动态字段联动

// 设置某字段显示/隐藏条件
{
  type: 'input',
  label: '备注',
  name: 'remark',
  visible: (values) => values.gender === '女'
}

在组件内部判断并控制渲染：

if (item.visible && !item.visible(form.getFieldsValue())) {
  return null;
}

2️⃣ 校验系统接入 Yup / Ajv

配合 form hook，使用 JSON Schema 或 Yup 实现更强的规则定义和提示。

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  username: Yup.string().required('用户名必填'),
  age: Yup.number().min(18, '必须年满 18 岁')
});

3️⃣ 表单值初始化、回填与格式转换

  • 支持 initialValues / defaultValue
  • 支持 onValueChange 钩子
  • 支持 valueTransform / submitFormat 自定义转换规则

📦 四、配套生态与工程化落地

能力模块实现方式
表单设计器拖拽式 schema 生成，可视化低代码平台
组件库适配支持 AntD、Element Plus、Naive UI、Arco 等
表单项扩展支持自定义组件注册与插槽机制
国际化支持label、提示等可 i18n 化
表单持久化与 localStorage/IndexedDB 结合，支持断点填写
多端适配支持小程序/移动端样式适配（如 formily、form-render）

✅ 总结：一个通用表单系统的评判标准

能力是否具备
JSON Schema 驱动✅
渲染灵活、可插拔✅
动态控制（联动/隐藏/禁用）✅
校验、格式化、国际化✅
可被复用、多项目通用✅
易于扩展组件/设计器✅

🎯 一个真正优秀的表单系统，是「抽象能力 + 业务理解 + 技术落地」的结合体。

👍 如果你觉得这篇文章有帮助，欢迎点赞、关注、收藏，之后会为大家带来更多的关于前端使用技术。

avatar
文章
阅读
粉丝