Vue 表单快速上手

Vue 是一个流行的前端框架，提供了许多组件和工具来简化表单的创建和管理。在这个教程中，我们将介绍如何使用 Vue 来快速创建表单，并管理用户输入。

什么是 Vue 表单？

Vue 表单是一种用于收集用户输入数据的 Web 表单，通常与 Vue.js 和其它依赖关系管理器（例如 Vuex）一起使用。Vue 表单不仅提供了一个易于使用的用户界面，还可帮助开发人员轻松管理表单验证和数据状态。

准备工作

在开始使用 Vue 表单之前，我们需要确保在网站上安装了 Vue 库和其它相关依赖。可以使用以下 CDN 引入 Vue：

<script src="https://vuejs.org/js/vue.min.js"></script>

创建表单

在 Vue.js 中，我们可以使用 v-model 指令来双向绑定表单数据。在以下示例中，我们将创建一个简单的表单，并使用 v-model 绑定用户输入的值：

<div id="app">
  <form>
    <input type="text" v-model="username">
    <input type="email" v-model="email">
    <button type="submit">Submit</button>
  </form>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    username: '',
    email: ''
  }
})
</script>

在上面的示例中，我们创建了两个输入框来收集用户名和电子邮件地址，并将它们绑定到 Vue 实例中的 username 和 email 数据属性中。此外，我们还将表单包装在一个 form 元素中，并添加了一个提交按钮。

表单验证

表单验证是一项关键功能，确保用户输入数据的正确性和完整性。在 Vue.js 中，我们可以使用 v-validate 指令来进行表单验证。

为了使用 v-validate，我们需要安装一个叫做 vee-validate 的插件。

npm install vee-validate --save

在我们的 Vue 实例中，我们可以使用以下代码初始化 vee-validate：

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate)

一旦我们已经初始化了 vee-validate 插件，我们就可以开始验证表单数据。以下示例演示了如何在表单输入中添加验证规则：

<form @submit.prevent="submitForm">
  <input type="text" v-model="username" v-validate="'required'">
  <!-- 显示错误信息 -->
  <span>{{ errors.first('username') }}</span>
  <input type="email" v-model="email" v-validate="'required|email'">
  <!-- 显示错误信息 -->
  <span>{{ errors.first('email') }}</span>
  <button type="submit">Submit</button>
</form>

在上面的示例中，我们使用 v-validate 指令设置了 required 和 email 两种验证规则。errors.first 方法返回第一个验证错误的文本。如果输入符合规则，则返回 undefined。在同一个 form 元素里面的所有证件规则校验错误信息都会显示在同一个 errors 对象里。

示例说明

示例 1 - 带时间选择项的简单表单

以下示例演示了如何使用 Vue 表单来创建一个简单的带时间选择项的表单。这个表单有一个日期选择器，一个时间选择器和一个提交按钮。时间格式为 hh:mm:ss。

<div id="app">
  <form @submit.prevent="submitForm">
    <div>
      <label for="date-input">Date</label>
      <input id="date-input" type="date" v-model="date" required>
    </div>
    <div>
      <label for="time-input">Time</label>
      <input id="time-input" type="time"v-model="time" required>
    </div>
    <button type="submit">Submit</button>
  </form>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    date: '',
    time: ''
  },
  methods: {
    submitForm() {
      const dateTime = this.date + ' ' + this.time
      console.log(dateTime)
    }
  }
})
</script>

由于 date 和 time 都是 required 字段，必须要有值。在提交表单时，我们将 date 和 time 合并成一个日期时间字符串，并在控制台中打印输出。

示例 2 - 联动选择

以下示例演示了如何使用 Vue 表单来创建一个联动关系的选择器。本示例介绍了两个选择器：一个用于选择国家，另一个用于选择城市。城市选择器的选项根据所选国家动态更新。

<div id="app">
  <form>
    <div>
      <label for="country-select">Country</label>
      <select id="country-select" v-model="selectedCountry">
        <option selected disabled>Please select a country</option>
        <option v-for="country in countries" :value="country">{{ country.name }}</option>
      </select>
    </div>
    <div>
      <label for="city-select">City</label>
      <select id="city-select" v-model="selectedCity" :disabled="!selectedCountry">
        <option selected disabled>Please select a city</option>
        <option v-for="city in selectedCountry.cities" :value="city">{{ city }}</option>
      </select>
    </div>
  </form>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selectedCountry: null,
    selectedCity: null,
    countries: [
      {
        name: 'United States',
        cities: ['New York', 'Los Angeles', 'Chicago']
      },
      {
        name: 'Canada',
        cities: ['Toronto', 'Vancouver', 'Montreal']
      },
      {
        name: 'Mexico',
        cities: ['Mexico City', 'Guadalajara', 'Monterrey']
      }
    ]
  }
})
</script>

在上面的示例中，我们使用 v-for 指令循环所有可选国家并将其添加到下拉选择器中。一旦选择了一个国家，相应的城市将按照 v-for 循环的方式动态更新。城市选择器禁用到选择有效的国家。

结论

在本教程中，我们介绍了如何使用 Vue 来快速创建并验证 Web 表单。Vue 提供了许多有用的指令和工具，使表单的创建和管理变得更加容易。现在，您应该可以创建自己的 Vue 表单并将其添加到网站中了。