介绍

Vue Formulate 是使用 Vue (opens new window) 构建表单的最简单方法。

An overview of Vue Formulate by the author. Why it exists, what it does, and where it is going.

尽管程序员们遇到的几乎每个项目都需要表单，但创建它们却出奇地乏味。Vue Formulate 旨在通过预测痛点和公开干净的 API（具有合理的默认值）来提高开发人员的幸福感，从而轻松实现通用功能。事实上，创建几乎任何类型的表单 只需要学习 两个组件：FormulateInput 和 FormulateForm。

使用 Vue Formulate 了的程序员可以

✓ 使用单个组件可以创建任何表单域 ✓ 对所有表单域使用原生的 v-model 绑定 ✓ 从单个对象 重新填充整个表单 ✓ 使用 JSON 构建整个表单 ✓ 轻松添加字段标签 ✓ 轻松添加提示文本 ✓ 将字段 分组 到自定义数据中结构 ✓ 为复杂的 UI 重复分组字段 ✓ 执行健壮的 表单验证 ✓ 创建 自定义验证 规则 ✓ 修改默认 验证消息 ✓ 创建和共享 自定义表单域 ✓ 覆盖默认组件模板的 作用域插槽 ✓ 还有 更多

Vue Formulate 中的每种类型的输入都是 FormulateInput 组件的一个实例。无论您需要文本域、密码框、下拉选择、复选框还是日期选择器，都会使用此组件。没有比这更容易记住的了。

Vue Formulate 最简单的实现就是输出一个 FormulateInput 没有额外配置的例子：

Output:

很熟悉吧？这本质上等同于原生 HTML：

所有 Vue Formulate 表单域都共享相同的语法。 根据 type 返回期望的 html 元素, 即使内部 HTML 结构不同。例如 与HTML中的 是完全不同的元素，但是在 Vue Formulate 中，你只需要记住更改 type 即可。

输出:

提示

使用 Vue Formulate，您只需要使用提供的 FormulateInput 元素并传递适当的参数 type 来生成您需要的表单域。无需记住各种组件名称来处理不同的输入类型。

表单域和表单验证是一项核心功能，易于添加。

在 验证器文档页面 上阅读更多信息

Vue Formulate 使用模型绑定 ( v-model) 来读/写表单域中的值。你可以在 ， 或这一起绑定数据（阅读 表单 的表单绑定部分的文档，了解更多信息）。

输出:

由于输入的值绑定到模型，你可以将模型绑定到多个表单域，甚至触发其他元素的验证错误。

输出:

Certain types of inputs set an array of values on their model.

输出:

阅读更多...

模型绑定并不是您对 FormulateInput 元素所能做的全部！还有很多额外的配置选项。

在 表单域页面 上阅读更多内容→

除了将值绑定到单个 FormulateInput 字段之外，您还可以通过将输入集合中的所有值包装在 FormulateForm 中并将 v-model 放置在该元素上来收集所有值。

阅读更多...

这不是所有内容……该 FormulateForm 元素还有其他几个非常有价值的功能，例如表单提交、组验证和文件上传。

阅读更多信息 使用表单 →

虽然 Vue Formulate 是一个强大的工具，用于构建、验证和处理表单上的错误——但这个包并不打算做这些事情：

Vuetify 是完整的 UI 框架，而 Vue Formulate 是用于构建表单的重点工具。有些人不喜欢使用大型 UI 框架，不将它们用于预先存在的项目中，不想学习新框架，或者只是喜欢编写自己的范围狭窄的样式。此外，我们认为 Vue Formulate 中的组合表单是首屈一指的。

与 Vuetify 类似，Buefy 是一个完整的 UI 框架。如果您已经在使用 Bulma 或者您正在寻找全面的 UI 解决方案，那么它是一个不错的选择。Vue Formulate 乐于在任何 UI 框架的上下文中生存，并且仍然提供灵活的表单组合、验证和错误处理等优点。即便如此，仍有很多人不想要或不需要一个完整的 UI 框架，而该框架将从 Vue Formulate 的专注方法中受益。

该 vue-forms 软件包专注于表单验证，而 Vue Formulate 对表单采用更全面和更有主见的方法，并附带 UI 脚手架、验证和数据建模。我们想让开发人员更轻松地进行表单组合，同时仍然提高整体质量 - 试试看。

VeeValidate 是 Vue 表单验证的另一个很好的选择，这就是它的主要任务——验证。Vue Formulate 通过将验证作为字段组合本身的一个子功能，使构建高质量表单变得更加容易。使用 Vue Formulate 构建表单非常简单且快速——当然，如果你需要额外的验证能力，你仍然可以使用它。您可以编写任何您想要的 自定义验证逻辑 ，甚至可以在单个字段上编写。

表单验证的另一个很好的选择，但只关注验证。Vue Formate 提供了额外的脚手架，允许开发人员以最小的弯路创建复杂的表单，其中包括验证和错误处理。

从 JSON 生成表单很棒，也是 Vue Formate 的一个子功能。由于 Vue Formulate 使用单个元素从 JSON 字符串或 JavaScript 模块创建任何输入类型的表单生成，就像使用v-for指令一样简单。 查看文档。

← 安装 验证器 →