vue实现表单收集

Vue 表单收集实现方法

双向数据绑定（v-model）

使用 v-model 指令实现表单元素与 Vue 实例数据的双向绑定。适用于大多数表单控件类型。

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

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        description: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.formData)
    }
  }
}
</script>

表单验证

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

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

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

动态表单字段

使用 v-for 动态渲染表单字段，适合字段数量不确定的场景。

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

文件上传处理

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

<template>
  <form @submit.prevent="handleUpload">
    <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 handleUpload() {
      const formData = new FormData()
      formData.append('file', this.file)

      try {
        const response = await axios.post('/upload', formData)
        console.log(response.data)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

第三方表单库

对于复杂表单需求，可以考虑使用专门的表单库如 VeeValidate 或 Element UI 的表单组件。

<template>
  <Form @submit="onSubmit">
    <Field name="email" rules="required|email" />
    <ErrorMessage name="email" />

    <button type="submit">提交</button>
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from 'vee-validate'

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },
  methods: {
    onSubmit(values) {
      console.log(values)
    }
  }
}
</script>

以上方法覆盖了 Vue 中实现表单收集的主要场景，从基础绑定到复杂验证和动态表单都有涉及。根据具体需求选择合适的方法组合使用。