第5篇：Vue 表单处理与数据校验

在前面的章节中，我们学习了 Vue 的事件处理与修饰符。在实际开发中，表单处理是前端开发中不可或缺的一部分。Vue 提供了 v-model 指令，可以轻松实现表单数据与数据模型的双向绑定。此外，我们还会学习如何实现表单的校验功能。

1. 使用 v-model 实现表单双向绑定

v-model 指令可以将表单元素的值与组件的数据绑定起来，实现数据的双向绑定。

示例：单行文本输入框

<template>
  <div>
    <h1>表单输入示例</h1>
    <input v-model="username" placeholder="请输入用户名" />
    <p>你输入的用户名是：{{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

<style scoped>
input {
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 16px;
}
</style>

解释：

• v-model 实现了输入框与数据 username 的双向绑定。
• 输入框的内容会实时同步到 username 数据。

2. v-model 在不同表单元素中的使用

（1）复选框

复选框与数据的绑定可以使用布尔值或数组。

<template>
  <div>
    <h2>复选框示例</h2>
    <label>
      <input type="checkbox" v-model="isChecked" /> 同意条款
    </label>
    <p>选中状态：{{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

（2）单选框

单选框适合绑定单个选项。

<template>
  <div>
    <h2>单选框示例</h2>
    <label>
      <input type="radio" value="男" v-model="gender" /> 男
    </label>
    <label>
      <input type="radio" value="女" v-model="gender" /> 女
    </label>
    <p>选择的性别：{{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ""
    };
  }
};
</script>

（3）多选框

多选框适合绑定数组，收集多个选中值。

<template>
  <div>
    <h2>多选框示例</h2>
    <label>
      <input type="checkbox" value="苹果" v-model="fruits" /> 苹果
    </label>
    <label>
      <input type="checkbox" value="香蕉" v-model="fruits" /> 香蕉
    </label>
    <label>
      <input type="checkbox" value="橘子" v-model="fruits" /> 橘子
    </label>
    <p>你选择的水果：{{ fruits.join(', ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: []
    };
  }
};
</script>

3. 表单提交与修饰符

使用 v-on 结合 submit 事件，可以监听表单的提交动作。

示例：表单提交

<template>
  <form @submit.prevent="handleSubmit">
    <h2>表单提交示例</h2>
    <input v-model="name" placeholder="输入你的名字" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ""
    };
  },
  methods: {
    handleSubmit() {
      alert("提交的名字是：" + this.name);
    }
  }
};
</script>

解释：

• @submit.prevent 阻止表单的默认提交行为（页面刷新）。
• handleSubmit 方法用于处理提交逻辑。

4. 表单校验示例

通过简单的条件判断，可以对表单数据进行校验。

示例：必填校验

<template>
  <div>
    <h2>表单校验示例</h2>
    <input v-model="email" placeholder="请输入邮箱" />
    <span v-if="!email" style="color: red;">邮箱不能为空！</span>
    <button @click="validateForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ""
    };
  },
  methods: {
    validateForm() {
      if (!this.email) {
        alert("请填写邮箱！");
      } else {
        alert("提交成功！");
      }
    }
  }
};
</script>

解释：

• 通过 v-if 判断 email 是否为空。
• 如果 email 为空，则显示错误提示。

5. 总结

在这一篇中，你学习了：

• 如何使用 v-model 实现表单的双向绑定。
• 如何处理单选框、复选框和输入框。
• 如何监听表单提交并阻止默认行为。
• 如何实现简单的表单数据校验。

下一篇中，我们将学习 Vue 的路由管理与页面跳转。