vue实现表单提交功能

表单基础结构

在Vue中实现表单提交功能，通常使用v-model指令实现双向数据绑定。以下是一个基础表单结构示例：

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

数据绑定与验证

定义表单数据对象和提交方法，可结合基础验证：

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.formData.username || !this.formData.password) {
        alert('请填写完整信息');
        return;
      }
      console.log('提交数据:', this.formData);
      // 这里添加实际提交逻辑
    }
  }
}
</script>

使用第三方验证库

对于复杂验证，推荐使用vee-validate或vuelidate。以vee-validate为例：

import { useField, useForm } from 'vee-validate';

export default {
  setup() {
    const { handleSubmit } = useForm();
    const { value: username } = useField('username', required);
    const { value: password } = useField('password', required);

    const onSubmit = handleSubmit(values => {
      console.log('验证通过:', values);
    });

    return { username, password, onSubmit };
  }
}

表单提交与API交互

结合axios实现异步提交：

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/submit', this.formData);
      console.log('提交成功:', response.data);
    } catch (error) {
      console.error('提交失败:', error);
    }
  }
}

表单重置功能

添加重置按钮及对应方法：

methods: {
  resetForm() {
    this.formData = {
      username: '',
      password: ''
    };
  }
}

<button type="button" @click="resetForm">重置</button>

表单加载状态

添加提交中的加载状态：

data() {
  return {
    isLoading: false,
    // ...其他数据
  }
},
methods: {
  async handleSubmit() {
    this.isLoading = true;
    try {
      await axios.post('/api/submit', this.formData);
    } finally {
      this.isLoading = false;
    }
  }
}

<button type="submit" :disabled="isLoading">
  {{ isLoading ? '提交中...' : '提交' }}
</button>