什么是 FormKit?

介绍

FormKit 不仅仅是一个 UI 库。它是一个全面的 表单构建框架,为 Vue 开发者提供更快、更易于访问、更好的 DX 和 UX 以及更少的代码来编写高质量的生产就绪表单。它易于学习,并附带生产就绪功能,如输入、验证规则和提交/错误处理。

FormKit 概述预告片

1 分钟

什么是表单框架?

为什么我需要一个完整的表单框架?表单不是很容易吗?在这个现场坦诚的采访中,FormKit 作者 Justin Schroeder 介绍了 FormKit 为您的项目带来的内容。提示:它不仅仅是 UI。

讨论 — FormKit:Vue 的表单框架

60 分钟

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

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

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

为什么选择 FormKit?

表单看似简单。毕竟,只需要一个 <form> 和一个 <input> 标签。然而,经验丰富的工程师知道,实现生产就绪的表单是繁琐和复杂的。FormKit 的关键功能旨在解决这些问题,同时使开发者能够高效愉快地编写表单:

关键特性

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

单个组件

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

可访问性

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

验证

前端验证可以为用户提供即时反馈,是提供良好用户体验的重要部分。不幸的是,即使使用了优秀的验证库,实现验证也可能非常繁琐。FormKit 通过将规则直接嵌入输入中,简化了前端验证的过程。

模式

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

样式

通过修改 FormKit 的类和 HTML,FormKit 提供了许多自定义表单样式的方法。您可以使用自己的 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构建强大的表单。学习基本知识以及更高级的主题,然后回到这里的文档,以便在特定用例中填补空白。

Robust Vue.js Forms - Vue School Course

1 hr, 49 mins

FormKit Discord 服务器

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