FormKit 不仅仅是一个 UI 库。它是一个全面的 表单构建框架,为 Vue 开发者提供更快、更易于访问、更好的 DX 和 UX 以及更少的代码来编写高质量的生产就绪表单。它易于学习,并附带生产就绪功能,如输入、验证规则和提交/错误处理。
为什么我需要一个完整的表单框架?表单不是很容易吗?在这个现场坦诚的采访中,FormKit 作者 Justin Schroeder 介绍了 FormKit 为您的项目带来的内容。提示:它不仅仅是 UI。
时间紧张?阅读介绍帖子,了解 FormKit 的目标,这是在框架首次发布时编写的。
表单看似简单。毕竟,只需要一个 <form>
和一个 <input>
标签。然而,经验丰富的工程师知道,实现生产就绪的表单是繁琐和复杂的。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是一个完整的UI框架,而FormKit是一个专注于构建表单的工具。有些人不喜欢使用大型UI框架,不想在现有项目中使用它们,不想学习新框架,或者只是喜欢编写自己的狭义范围的样式。此外,我们认为在FormKit中组合表单是首屈一指的。
与Vuetify类似,Buefy是一个完整的UI框架。如果您已经在使用Bulma或者您正在寻找一个全面的UI解决方案,那么它是一个不错的选择。FormKit可以与任何UI框架共存,并仍然提供流畅的表单组合、验证和错误处理等优点。即使如此,仍然有很多人不想或不需要一个完整的UI框架,而会从FormKit的专注方法中受益。
VeeValidate是Vue表单验证的一个很好的选择,它的主要任务是验证。FormKit通过将验证作为字段组合本身的子功能,使构建高质量表单变得更容易。使用FormKit构建表单非常简单且速度极快——当然,如果您需要额外的验证功能,您仍然可以拥有它。您可以编写任何您想要的自定义验证逻辑。
又是一个很好的表单验证选项,但专注于验证。FormKit提供了额外的支架和功能,如可访问性、i18n和输入组合,使开发人员能够在最小的摩擦下创建复杂的表单,并包括验证和错误处理。
从JSON生成表单非常棒——这就是为什么schema是FormKit的子功能。只需将您的表单schema传递给FormKitSchema
组件,然后瞧!查看这里的文档。现在您可以使用同一个工具进行表单组合和生成!
更喜欢通过观看学习?Vue School有一个很好的课程,可以帮助您开始使用FormKit为Vue.js构建强大的表单。学习基本知识以及更高级的主题,然后回到这里的文档,以便在特定用例中填补空白。
如果您需要普遍的帮助或想在社区内建立联系,请考虑加入官方 FormKit Discord。在那里,超过 1200 名开发者和核心团队成员进行着积极的讨论。如果您还不是会员(免费且开放),您需要使用以下邀请链接加入服务器: