当前位置：首页 > VUE

vue实现表单提交功能

2026-02-23 03:57:22VUE

表单组件结构

使用 Vue 的 v-model 实现表单数据双向绑定，结合 <form> 标签和 @submit 事件处理提交逻辑。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" type="text" placeholder="用户名" />
    <input v-model="formData.password" type="password" placeholder="密码" />
    <button type="submit">提交</button>
  </form>
</template>

数据绑定与验证

在 data 中定义表单数据对象，通过方法验证输入内容。

vue实现表单提交功能

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    validateForm() {
      if (!this.formData.username.trim()) {
        alert('用户名不能为空');
        return false;
      }
      if (this.formData.password.length < 6) {
        alert('密码至少6位');
        return false;
      }
      return true;
    }
  }
}
</script>

提交逻辑处理

通过 axios 或 fetch 发送表单数据到后端，处理成功或错误反馈。

vue实现表单提交功能

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return;

    try {
      const response = await axios.post('/api/submit', this.formData);
      alert('提交成功: ' + response.data.message);
    } catch (error) {
      alert('提交失败: ' + error.message);
    }
  }
}

表单重置

提交后清空表单数据，提供更好的用户体验。

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return;

    try {
      const response = await axios.post('/api/submit', this.formData);
      alert('提交成功: ' + response.data.message);
      this.formData = { username: '', password: '' }; // 重置表单
    } catch (error) {
      alert('提交失败: ' + error.message);
    }
  }
}

使用 UI 库增强（可选）

集成如 Element UI 或 Vuetify 的表单组件，简化样式和验证逻辑。

<template>
  <el-form :model="formData" :rules="rules" @submit.native.prevent="handleSubmit">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="password" />
    </el-form-item>
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form>
</template>