# 介绍

Vue Formulate 是使用 Vue 构建表单的最简单方法。

Introducing Vue Formulate — truly delightful form authoring.

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 没有额外配置的例子：

<FormulateInput type="text" />

Output:

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

<input type="text">

# 返回不同的表单域类型

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

<FormulateInput type="textarea" />

输出:

提示

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

# 验证器

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

<FormulateInput
  type="email"
  name="email"
  validation="required|email"
/>

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

# 模型绑定

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

<template>
  <div>
    <FormulateInput
      type="text"
      label="What is your name?"
      v-model="value"
    />
    <strong>Hello <em>{{ value }}</em>!</strong>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 'My initial value'
    }
  }
}
</script>

输出:

What is your name?

Hello My initial value!

# 双重绑定

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

<template>
  <div>
    <FormulateInput
      type="text"
      label="Favorite car brand?"
      validation="not:Toyota"
      validation-name="car brand"
      error-behavior="live"
      v-model="brand"
    />
    <FormulateInput
      type="radio"
      v-model="brand"
      error-behavior="live"
      validation="in:Toyota,Honda"
      :options="{Toyota: 'I like Toyota', Honda: 'I like Honda' }"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      brand: 'Honda'
    }
  }
}
</script>

输出:

Favorite car brand?

I like Toyota

I like Honda

# Array binding

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

<FormulateInput
  type="checkbox"
  label="Which animals make good pets?"
  v-model="pets"
  :options="{dog: 'Dogs', alligators: 'Alligators', cat: 'Cats'}"
/>

输出:

Which animals make good pets?

Dogs

Alligators

Cats

[]

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

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

# 表单绑定

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

<FormulateForm
  v-model="formValues"
>
  <FormulateInput
    name="name"
    label="What is your name?"
    validation="required"
  />
  <FormulateInput
    name="age"
    label="How old are you?"
    validation="required|number|max:120"
  />
  <FormulateInput
    type="submit"
    label="Sign up"
  />
</FormulateForm>

{}

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

阅读更多信息使用表单 →

# 它不是什么

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

这不是 UI 框架或布局工具。想要彼此相邻的输入吗？凉爽的！将一些输入包裹在一个 <div>。这个包假设你仍然负责你的表单布局。
这个包是 BYOB——带上你自己的后端。Vue Formulate 并不关心您选择的后端（最接近关心的是使用文件域时）

# 为什么不 ... ?

# Vuetify

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

# Buefy

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

# vue-forms

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

# VeeValidate

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

# Vuelidate

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

# vue-form-generator

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

← 安装验证器 →