vue实现表单收集

Vue 表单收集实现方法

双向数据绑定

使用 v-model 指令实现表单元素与 Vue 实例数据的双向绑定。适用于 input、textarea、select 等表单元素。

<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() {
      console.log('提交数据:', this.formData)
      // 发送到后端API
    }
  }
}
</script>

表单验证

结合 Vue 的 computed 属性或第三方库如 VeeValidate 实现表单验证。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" type="email">
    <span v-if="!isEmailValid">邮箱格式不正确</span>
    <button :disabled="!isFormValid" type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        email: ''
      }
    }
  },
  computed: {
    isEmailValid() {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return re.test(this.formData.email)
    },
    isFormValid() {
      return this.isEmailValid
    }
  },
  methods: {
    handleSubmit() {
      // 提交逻辑
    }
  }
}
</script>

动态表单字段

使用 v-for 指令渲染动态生成的表单字段。

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in formFields" :key="index">
      <label>{{ field.label }}</label>
      <input v-model="field.value" :type="field.type">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { label: '姓名', value: '', type: 'text' },
        { label: '年龄', value: '', type: 'number' }
      ]
    }
  },
  methods: {
    handleSubmit() {
      const formData = this.formFields.reduce((acc, field) => {
        acc[field.label] = field.value
        return acc
      }, {})
      console.log(formData)
    }
  }
}
</script>

文件上传处理

使用 <input type="file"> 结合 FormData 处理文件上传。

<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]
    },
    handleSubmit() {
      const formData = new FormData()
      formData.append('file', this.file)

      // 使用axios发送
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }
  }
}
</script>

表单组件封装

创建可复用的表单组件，通过 props 和 events 与父组件通信。

<!-- FormInput.vue -->
<template>
  <div>
    <label>{{ label }}</label>
    <input 
      :value="value"
      @input="$emit('input', $event.target.value)"
      :type="type"
    >
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    label: String,
    type: {
      type: String,
      default: 'text'
    }
  }
}
</script>

<!-- 使用组件 -->
<template>
  <form @submit.prevent="handleSubmit">
    <FormInput 
      v-model="formData.name"
      label="姓名"
      type="text"
    />
    <button type="submit">提交</button>
  </form>
</template>