前端表单构建神器 - formkit初体验

传统表单开发 vs 低代码方案

传统的表单开发，无论是基于dom还是数据驱动的，都离不开手写html模板。尤其对于复杂的表单：关联字段联动、校验、表单字段的排版等等都有相当大的工作量。为此近些年涌现出不少的低代码方案，旨在通过页面拖拽配置的形式来高效的维护表单功能，来代替繁重的代码开发维护。基于JSON Schema的表单构建方案就是在这个背景下诞生，而具有代表性的就是本文要介绍的FormKit

FormKit项目初始化

准备源码路径：D:\2026学习\study\code\formkit示例\001_formkit项目初始化\parent

右键parent，用idea打开

自动完成依赖安装更新

看下默认安装的依赖：

json 复制代码

"dependencies": {  
  "@formkit/core": "^2.0.0",  
  "@formkit/icons": "^2.0.0",  
  "@formkit/themes": "^2.0.0",  
  "@formkit/vue": "^2.0.0",  
  "@tailwindcss/vite": "^4.2.2",  
  "tailwindcss": "^4.2.2",  
  "vue": "^3.5.32"  
}

formkit不光是UI框架，更是开箱即用的json schema渲染表单的解决方案。对于UI，formkit直接用Tailwind来构建和维护组件样式。

修复类型引入问题

创建pnpm启动项

运行dev，访问：http://localhost:5173/，将看到页面：

组件的渲染方式

有两种方式：html中编写组件标签和基于schema的集中维护定义。

前者属于传统的组件使用方式，大部分场景下我们的表单开发都是直接用开源组件库如element plus，来编写和维护表单，FormKit也支持这个方式，它提供了内置的常用表单组件，同时提供了非常好的机制让我们扩展自定义组件，包括集成现有的UI组件。

组件定义方式

直接写组件标签，类似于使用Element Plus中的组件来手动构建表单：

html 复制代码

<FormKit
  type="form"
  #default="{ value }"
  @submit="submit"
>
  <FormKit
	type="text"
	name="name"
	label="Name"
	help="..."
  />
  <FormKit
	type="checkbox"
	name="flavors"
	label="..."
	:options="{ ... }"
	validation="required|min:2"
  />
  
  <FormKit
	type="checkbox"
	name="agree"
	label="..."
  />
  ...
</FormKit>

基于Schema的定义方式

这种方式方便集中维护表单字段定义，FormKit可以基于表单定义的Schema动态的渲染表单，是低代码表单设计器的构建产物。有了它，我们只要关注于字段配置的扩展以及如何设计和实现表单设计器来在线生成表单定义数据。

html 复制代码

<script setup lang="ts">
import {ref} from "vue"

const formSchema = {
  $formkit: 'form',
  children: [{
    $formkit: 'text',
    name: 'name',
    label: 'Name',
    help: '...',
  },
  {
    $formkit: 'checkbox',
    name: 'flavors',
    label: 'Favorite ice cream flavors',
    options: { ... },
    validation: 'required|min:2',
  },
  {
    $formkit: 'checkbox',
    name: 'agree',
    label: '...',
  },
]}

const data = ref({})

async function submit() {
  await new Promise(r => setTimeout(r, 1000))
  alert('Submitted! 🎉')
}
</script>

<template>
  <div class="...">
    <img ...>
    <FormKitSchema :schema="formSchema" v-model="data" @submit="submit" />
    <pre class="...">{{ data }}</pre>
  </div>
</template>

校验

FormKit提供了非常强大的内置校验和自定义扩展的方式，具体可参考校验官方文档

示例中对一个字段启用非空和长度校验非常简单，比如这里的多选框字段，只需简单配置为：validation: 'required|min:2'，页面效果：

FormKit支持国际化，只需要在formkit.config.ts中进行如下配置：

ts 复制代码

...
import { zh } from '@formkit/i18n'
const config: DefaultConfigOptions = {
  ...
  locales: { zh },
  locale: 'zh',
}
export default config

会看到系统的校验信息变成了中文

官方文档

以上我们的介绍只是FormKit功能特性的九牛一毛，具体的API用法配置请参考FormKit官方文档。个人觉得看了那么多技术文档，FormKit无论是可读性和用户体验都是非常好的，唯一的遗憾是没有中文版。后续的例子也都会从官方文档来扩展。

好了，本次的学习分享就到这里。希望本篇能给前端低代码研发的小伙伴一些启示，我是小卷，一个爱学习分享的搬砖老码农，我们下期再见！