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)
      // 这里添加AJAX请求逻辑
    }
  }
}
</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 = !this.errors.email
    },
    handleSubmit() {
      if (this.isValid) {
        // 提交逻辑
      }
    }
  }
}
</script>

文件上传处理

处理文件上传需要单独处理 input type="file"：

<template>
  <form @submit.prevent="handleSubmit">
    <input type="file" @change="handleFileChange">
    <button type="submit">上传</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0]
    },
    async handleSubmit() {
      const formData = new FormData()
      formData.append('file', this.file)

      try {
        const response = await axios.post('/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
        console.log('上传成功', response.data)
      } catch (error) {
        console.error('上传失败', error)
      }
    }
  }
}
</script>

使用第三方库

Element UI 的表单组件示例：

<template>
  <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">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: { username: '' },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          // 提交逻辑
        }
      })
    }
  }
}
</script>

表单重置功能

添加重置按钮清除表单数据：

<template>
  <form @submit.prevent="handleSubmit" ref="form">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
    <button type="button" @click="resetForm">重置</button>
  </form>
</template>

<script>
export default {
  methods: {
    resetForm() {
      this.formData = { username: '', password: '' }
      // 如果用第三方库可能需要调用重置方法
      // this.$refs.formRef.resetFields()
    }
  }
}
</script>

动态表单字段

根据条件动态添加表单字段：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in dynamicFields" :key="index">
      <input v-model="field.value" :placeholder="field.placeholder">
      <button @click="removeField(index)">删除</button>
    </div>
    <button @click="addField">添加字段</button>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      dynamicFields: [
        { value: '', placeholder: '字段1' }
      ]
    }
  },
  methods: {
    addField() {
      this.dynamicFields.push({
        value: '',
        placeholder: `字段${this.dynamicFields.length + 1}`
      })
    },
    removeField(index) {
      this.dynamicFields.splice(index, 1)
    }
  }
}
</script>