# 介绍

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

Vue Formulate
Article

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(具有合理的默认值)来提高开发人员的幸福感,从而轻松实现通用功能。事实上,创建几乎任何类型的表单 只需要学习 两个组件:FormulateInputFormulateForm

使用 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>

输出:

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>

输出:

# 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'}"
/>

输出:

[]

阅读更多...

模型绑定并不是您对 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 是一个强大的工具,用于构建、验证和处理表单上的错误——但这个包并不打算做这些事情:

  1. 这不是 UI 框架或布局工具。想要彼此相邻的输入吗?凉爽的!将一些输入包裹在一个 <div>。这个包假设你仍然负责你的表单布局。
  2. 这个包是 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指令一样简单。 查看文档