vue 实现form表单提交

基本表单结构

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

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" 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() {
      console.log('提交数据:', this.formData)
      // 这里添加API请求逻辑
    }
  }
}
</script>

表单验证

推荐使用VeeValidate或Element UI等库进行验证。以下是原生验证示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" @blur="validateEmail">
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { email: '' },
      errors: { email: '' },
      isValid: false
    }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      this.errors.email = regex.test(this.formData.email) ? '' : '邮箱格式错误'
      this.isValid = !Object.values(this.errors).some(Boolean)
    },
    handleSubmit() {
      if (this.isValid) {
        // 提交逻辑
      }
    }
  }
}
</script>

异步提交处理

结合axios处理异步请求：

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/submit', this.formData)
      console.log('提交成功:', response.data)
      this.$router.push('/success') // 成功跳转
    } catch (error) {
      console.error('提交失败:', error.response?.data || error.message)
    }
  }
}

文件上传处理

需要特殊处理文件类型：

<input type="file" @change="handleFileUpload">

methods: {
  handleFileUpload(e) {
    this.formData.file = e.target.files[0]
  },
  async submitForm() {
    const formData = new FormData()
    Object.entries(this.formData).forEach(([key, value]) => {
      formData.append(key, value)
    })
    await axios.post('/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
  }
}

第三方UI库集成

以Element UI为例：

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
  </el-form-item>
</el-form>

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
  ]
},
methods: {
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        // 提交逻辑
      }
    })
  }
}