用vue实现表单

使用 Vue 实现表单

基础表单结构

在 Vue 中实现表单可以通过 v-model 实现双向数据绑定，以下是一个基础表单示例：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="form.name" />

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="form.email" />

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

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交的数据：', this.form)
    }
  }
}
</script>

表单验证

可以通过 Vue 的计算属性或第三方库（如 VeeValidate）实现表单验证：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="form.name" />
    <span v-if="errors.name">{{ errors.name }}</span>

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="form.email" />
    <span v-if="errors.email">{{ errors.email }}</span>

    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      errors: {
        name: '',
        email: ''
      }
    }
  },
  computed: {
    isValid() {
      return this.form.name && this.form.email && !this.errors.name && !this.errors.email
    }
  },
  methods: {
    validateName() {
      this.errors.name = this.form.name ? '' : '姓名不能为空'
    },
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      this.errors.email = emailRegex.test(this.form.email) ? '' : '邮箱格式不正确'
    },
    handleSubmit() {
      this.validateName()
      this.validateEmail()
      if (this.isValid) {
        console.log('提交的数据：', this.form)
      }
    }
  }
}
</script>

动态表单字段

可以通过 v-for 动态生成表单字段：

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

<script>
export default {
  data() {
    return {
      fields: [
        { id: 'name', label: '姓名', type: 'text', model: 'name' },
        { id: 'email', label: '邮箱', type: 'email', model: 'email' }
      ],
      form: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交的数据：', this.form)
    }
  }
}
</script>

表单提交与异步处理

结合 axios 或其他 HTTP 库处理表单提交：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="form.name" />

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="form.email" />

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      isSubmitting: false
    }
  },
  methods: {
    async handleSubmit() {
      this.isSubmitting = true
      try {
        const response = await axios.post('/api/submit', this.form)
        console.log('提交成功：', response.data)
      } catch (error) {
        console.error('提交失败：', error)
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中可以通过 ref 或 reactive 实现表单逻辑：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="form.name" />

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="form.email" />

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

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const form = reactive({
      name: '',
      email: ''
    })

    const handleSubmit = () => {
      console.log('提交的数据：', form)
    }

    return {
      form,
      handleSubmit
    }
  }
}
</script>