Introducing KickStart —  AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free

什么是FormKit?

简介

FormKit远不仅仅是一个UI库。它是一个全面的_表单构建框架_,为Vue开发者提供了更快速、更易于访问的高质量生产就绪表单的制作方法,同时提供了更好的DX、UX和更少的代码。它易于学习,并配备了生产就绪的功能,如输入、验证规则和提交/错误处理。

什么是"表单框架"?

为什么我需要一个全功能的表单框架?表单不是很简单吗?像Vue这样的UI库和框架不是已经解决了所有的问题吗?不,因为表单是它们自己独特的问题集,它们代表了自己独特的数据树,它们应该有自己的框架。

对FormKit最好的概述是Justin Schroeder(FormKit的主要作者)在2023年VueConf US上的演讲"Conquering Forms in Vue"。下面的视频从演讲的大约12分钟开始——但如果你有时间,从头开始观看是值得的。

VueConf US 2023: Conquering Forms in Vue

30 mins

时间紧张?阅读介绍帖子,了解FormKit的目标,这是在框架首次发布时写的。

阅读核心团队成员Justin Schroeder在DEV.to上发布的完整的"Introducing FormKit"宣言。
文章

阅读核心团队成员Justin Schroeder在DEV.to上发布的完整的"Introducing FormKit"宣言。

为什么选择FormKit?

表单看起来很简单。毕竟,只需要一个<form>和一个<input>标签就可以了。然而,经验丰富的工程师知道,实现生产就绪的表单是繁琐和复杂的。FormKit的关键特性旨在解决这些问题,同时使开发者的表单制作效率高且愉快:

关键特性

  • 单一组件:FormKit被设计为一个用于所有输入的单一组件。
  • 可访问性:我们默认输出有意见的可访问标记。
  • 验证:众多内置验证规则,提供即时反馈。
  • 模式:强大的模式格式,用于存储和生成表单。
  • 样式:精心制作的主题。
  • 可扩展性:任何特性都易于扩展。
  • 社区:友好的社区将帮助你解决你的问题。

单一组件

开发者喜欢学习——但没有人喜欢研究第三方API和配置选项。这就是为什么FormKit使用单一组件来处理所有的输入<FormKit>是你开始需要了解的唯一组件——它的工作方式就像你期望的<input>标签一样。

可访问性

创建可访问的表单是一个严重的挑战。尤其是当可访问性标准并不总是清晰,而且大多数开发者都在时间压力下。理想情况下,所有的开发者都应该熟悉可访问性的最佳实践,但不幸的是,情况并非如此。为了解决这个问题,FormKit输出了一个有观点的可访问DOM结构。这与许多流行的“无渲染”表单库不同,后者不提供任何标记,而依赖开发者自己提供输入。

验证

前端验证能够提供即时反馈,这是为用户提供良好体验的重要部分。不幸的是,即使你使用了一个很好的验证库,实现它也可能非常繁琐。FormKit通过将规则直接嵌入到输入中,消除了前端验证的痛苦。

模式

FormKit的模式是一种用于存储DOM结构和组件实现的JSON序列化数据格式,包括FormKit表单。模式支持高级功能,如表单生成、条件逻辑、布尔运算符、循环、插槽和数据作用域——所有这些都保证序列化为字符串。

样式

FormKit提供了许多方式来设计你的表单,你可以修改FormKit的类甚至HTML。你可以自己编写CSS,使用像Tailwind CSS这样的实用类框架,或者使用Genesis——我们的现成主题,它在各种设计环境中都表现出色!

可扩展性

FormKit带有很好的生产就绪默认值,对于许多用户来说,这些默认值就是他们所需要的。但FormKit不仅仅是输入。它是一个完整的表单构建_框架_,包括钩子事件插件、库和模式。高级开发者可以使用FormKit的低级工具制作他们自己的表单系统。

社区

FormKit有一个活跃的Discord社区,在那里,帮助只需几次键盘敲击就能得到。社区成员和核心团队成员都在那里花时间帮助用户解决他们的问题。

为什么不...?

虽然FormKit做了很多事情,但它不是一个UI框架或一个_布局_工具。想要将输入项放在一起?很酷!在一个<div>中包装一些输入项,然后撒上一些flexbox。虽然FormKit附带一个默认主题,但这个包假设你仍然需要负责你的表单的大部分样式和布局。FormKit可以很好地与任何UI框架或你自己的自定义样式配合使用。

如果你需要一个完整的UI框架,你可以查看这些其他的优秀工具:

Vuetify

Vuetify是一个完整的UI框架,而FormKit是一个专注于构建表单的工具。有些人不喜欢使用大型的UI框架,不想在已有的项目上使用它们,不想学习一个新的框架,或者只是喜欢编写他们自己的狭义范围的样式。此外,我们认为在FormKit中组成表单是无与伦比的。

Buefy

与Vuetify类似,Buefy是一个完整的UI框架。如果你已经在使用Bulma或者你正在寻找一个全面的UI解决方案,那么它是一个坚实的选择。FormKit可以与任何UI框架共存,并且仍然提供了流畅的表单组成、验证和错误处理等优点。即使如此,仍然有很多人不想或不需要一个完整的UI框架,他们会从FormKit的专注方法中受益。

VeeValidate

VeeValidate是Vue表单验证的一个很好的选择,这是它的主要任务——验证。FormKit通过将验证作为字段组成本身的一个子特性,使构建高质量的表单变得更容易。使用FormKit构建表单非常容易且速度极快——当然,如果你需要额外的验证能力,你仍然拥有它。你可以编写任何你想要的自定义验证逻辑

Vuelidate

又是一个用于表单验证的优秀选项,但只专注于验证。FormKit提供了额外的脚手架和功能,如可访问性、i18n和输入组成,使开发人员能够在验证和错误处理包含在内的情况下,以最小的摩擦创建复杂的表单。

vue-form-generator

从JSON生成表单是很好的——这就是为什么schema是FormKit的一个子特性。只需将你的表单schema传递给FormKitSchema组件,然后瞧!查看这里的文档。现在你可以使用同一个工具进行表单组成和生成!

视频课程

更喜欢通过观看来学习?Vue School有一个优秀的课程,可以帮助你开始使用FormKit构建强大的Vue.js表单。学习基础知识以及更高级的主题,然后当你需要填补特定用例的空白时,回到这里查看文档。

健壮的Vue.js表单 - Vue School课程

1小时,49分钟

FormKit Discord服务器

如果您需要一般性的帮助或希望在社区内建立联系,请考虑加入官方的FormKit Discord。超过1200名开发者以及核心团队成员在那里进行活跃的讨论。如果您还不是会员(免费且开放),您需要使用以下邀请链接加入服务器: