Vue.js 表单（深入浅出）

Vue.js 表单：从零开始掌握数据绑定与验证

在前端开发中，表单是用户与系统交互最频繁的部分之一。无论是注册登录、填写问卷，还是提交订单，背后都离不开一个稳定、易用的表单系统。Vue.js 作为当下主流的渐进式框架，其对表单的支持非常出色，不仅提供了双向数据绑定，还内置了强大的表单验证机制。

今天我们就来深入聊聊 Vue.js 表单的使用方式，帮助你从入门到进阶，真正掌握这一核心功能。无论你是初学者还是有一定经验的开发者，都能在这篇文章中找到实用的解决方案。

双向数据绑定：表单与数据的“心跳同步”

在 Vue 3.0 中，v-model 指令是实现表单与数据双向绑定的核心工具。你可以把它想象成一条“数据高速公路”，用户在输入框里打字，数据立刻更新到 Vue 实例中；反之，如果代码中修改了数据，输入框的内容也会自动刷新。

这背后依赖的是 v-model 的语法糖机制，它实际上是 :value 和 @input 的组合写法。我们通过一个简单的例子来理解：

<template>
  <!-- 使用 v-model 绑定 name 变量 -->
  <input v-model="name" placeholder="请输入你的名字" />
  <p>你好，{{ name }}！</p>
</template>

<script setup>
// 定义响应式数据
import { ref } from 'vue'

// name 是一个响应式变量，初始值为空字符串
const name = ref('')
</script>

注释：

ref() 创建一个响应式引用对象，用于存储可变数据。

v-model="name" 等价于 :value="name" 与 @input="name = $event.target.value" 的组合。

当用户输入时，name 的值会实时更新，页面上的 {{ name }} 也会同步显示。

这种机制让表单开发变得极为直观，你不再需要手动监听 input 事件或调用 event.target.value，代码更简洁，逻辑更清晰。

多种表单元素的绑定实践

除了文本输入框，Vue.js 还支持对多种表单控件的 v-model 绑定。下面是一些常见控件的使用方式。

复选框（checkbox）

单个复选框绑定布尔值：

<template>
  <label>
    <input type="checkbox" v-model="isAgree" />
    我已阅读并同意用户协议
  </label>
  <p>是否同意：{{ isAgree ? '是' : '否' }}</p>
</template>

<script setup>
import { ref } from 'vue'

// isAgree 是一个布尔值，用于表示是否勾选
const isAgree = ref(false)
</script>

注释：

v-model 会自动将 checkbox 的选中状态映射为 true 或 false。

未选中时值为 false，选中后变为 true。

多个复选框绑定到数组：

<template>
  <div>
    <label v-for="item in hobbies" :key="item">
      <input type="checkbox" :value="item" v-model="selectedHobbies" />
      {{ item }}
    </label>
  </div>
  <p>选择的兴趣爱好：{{ selectedHobbies.join('、') }}</p>
</template>

<script setup>
import { ref } from 'vue'

// 定义可选项
const hobbies = ['阅读', '编程', '运动', '旅行']

// selectedHobbies 是一个数组，存储用户选中的项
const selectedHobbies = ref([])
</script>

注释：

使用 :value="item" 将每个选项的值绑定到数组中。

v-model 会自动将选中的值添加到 selectedHobbies 数组中。

适合用于“多选题”场景。

单选按钮（radio）

<template>
  <div>
    <label>
      <input type="radio" value="男" v-model="gender" />
      男
    </label>
    <label>
      <input type="radio" value="女" v-model="gender" />
      女
    </label>
    <label>
      <input type="radio" value="其他" v-model="gender" />
      其他
    </label>
  </div>
  <p>性别：{{ gender }}</p>
</template>

<script setup>
import { ref } from 'vue'

// gender 用于存储当前选中的性别
const gender = ref('')
</script>

注释：

所有 radio 按钮必须拥有相同的 v-model 名称，才能实现互斥选择。

选中后，gender 的值会变为对应 value 的值。

表单验证：让数据更可靠

用户输入的数据往往不可靠，比如邮箱格式错误、密码太短等。Vue.js 本身不提供内置验证器，但你可以结合 v-model 和计算属性、方法来实现验证逻辑。

基于响应式数据的实时验证

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>邮箱：</label>
      <input v-model="email" type="email" placeholder="请输入邮箱" />
      <!-- 显示错误提示 -->
      <p v-if="!isEmailValid && email" class="error">请输入有效的邮箱地址</p>
    </div>

    <div>
      <label>密码：</label>
      <input v-model="password" type="password" placeholder="请输入密码" />
      <p v-if="!isPasswordValid && password" class="error">密码至少 6 位</p>
    </div>

    <button type="submit" :disabled="!isFormValid">提交</button>
  </form>
</template>

<script setup>
import { ref, computed } from 'vue'

// 定义表单数据
const email = ref('')
const password = ref('')

// 实时验证邮箱格式（使用正则表达式）
const isEmailValid = computed(() => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return email.value === '' || regex.test(email.value)
})

// 验证密码长度
const isPasswordValid = computed(() => {
  return password.value.length >= 6 || password.value === ''
})

// 表单整体是否有效
const isFormValid = computed(() => {
  return isEmailValid.value && isPasswordValid.value
})

// 表单提交处理函数
const handleSubmit = () => {
  if (isFormValid.value) {
    alert('表单提交成功！')
    // 这里可以调用 API 提交数据
  } else {
    alert('请检查表单内容')
  }
}
</script>

<style scoped>
.error {
  color: red;
  font-size: 12px;
}
</style>

注释：

@submit.prevent 阻止默认提交行为，避免页面刷新。

computed 用于创建依赖响应式数据的计算属性，自动更新。

正则表达式 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ 用于匹配标准邮箱格式。

:disabled="!isFormValid" 控制按钮状态，只有在所有验证通过时才可点击。

这个结构清晰、易于扩展，是实际项目中常用的验证模式。

使用 Composables 封装表单逻辑

当项目中多个表单需要相似的验证逻辑时，我们可以将表单处理封装成一个可复用的 Composable 函数。

// composables/useFormValidation.js
import { ref, computed } from 'vue'

export function useFormValidation(initialValues = {}) {
  // 创建响应式数据
  const formData = ref({ ...initialValues })

  // 验证规则
  const rules = ref({
    email: (value) => {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return value === '' || regex.test(value)
    },
    password: (value) => value.length >= 6
  })

  // 每个字段的验证状态
  const errors = ref({})

  // 验证所有字段
  const validate = () => {
    const newErrors = {}
    Object.keys(formData.value).forEach(key => {
      const rule = rules.value[key]
      if (rule && !rule(formData.value[key])) {
        newErrors[key] = '验证失败'
      }
    })
    errors.value = newErrors
    return Object.keys(newErrors).length === 0
  }

  // 重置表单
  const reset = () => {
    formData.value = { ...initialValues }
    errors.value = {}
  }

  // 获取表单数据
  const getFormData = () => formData.value

  return {
    formData,
    errors,
    validate,
    reset,
    getFormData
  }
}

在组件中使用：

<script setup>
import { useFormValidation } from '@/composables/useFormValidation'

// 初始化表单数据
const { formData, errors, validate, reset } = useFormValidation({
  email: '',
  password: ''
})

// 提交处理
const handleSubmit = async () => {
  if (validate()) {
    console.log('提交数据：', formData.value)
    // 发送请求
  } else {
    console.log('验证失败')
  }
}
</script>

注释：

useFormValidation 是一个可复用的组合式函数，封装了表单数据、验证逻辑和重置功能。

通过 ref 和 computed 实现响应式管理，便于维护。

适合在多个页面中复用，提升开发效率。

表单最佳实践总结

在实际开发中，掌握 Vue.js 表单的使用，不仅仅是写几个 v-model，更需要考虑可维护性、可扩展性和用户体验。

避免直接操作 DOM：使用响应式数据驱动视图，Vue 会自动处理更新。
分离验证逻辑：将验证规则抽象为函数或 Composable，便于测试和复用。
提供清晰的反馈：错误提示要明确，用户能快速知道哪里出错。
合理使用 prevent：阻止默认提交行为，避免页面刷新。
及时清理状态：提交成功后应重置表单，提升用户体验。

结语

Vue.js 表单功能强大而灵活，从基础的 v-model 到复杂的验证与状态管理，都提供了优雅的解决方案。掌握这些技巧，不仅能让你写出更健壮的代码，还能显著提升开发效率。

无论是开发个人项目还是企业级应用，理解并熟练运用 Vue.js 表单，都是每一位前端开发者必须具备的核心能力。希望这篇文章能成为你学习路上的实用指南，助你在 Vue 世界中走得更远。