vue实现新增表单

使用 Vue 实现新增表单

在 Vue 中实现新增表单功能，可以通过数据绑定、表单验证和事件处理来完成。以下是一个完整的实现方法。

表单模板结构

使用 v-model 实现表单数据的双向绑定，@submit.prevent 阻止表单默认提交行为。

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="name">姓名：</label>
      <input id="name" v-model="formData.name" type="text" />
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input id="email" v-model="formData.email" type="email" />
    </div>
    <div>
      <label for="age">年龄：</label>
      <input id="age" v-model="formData.age" type="number" />
    </div>
    <button type="submit">提交</button>
  </form>
</template>

表单数据与逻辑

在 data 中定义表单的初始数据，并通过方法处理提交逻辑。

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        age: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (this.validateForm()) {
        console.log('提交数据：', this.formData)
        // 调用 API 或处理数据
        this.resetForm()
      }
    },
    validateForm() {
      if (!this.formData.name) {
        alert('请输入姓名')
        return false
      }
      if (!this.formData.email.includes('@')) {
        alert('请输入有效的邮箱')
        return false
      }
      return true
    },
    resetForm() {
      this.formData = {
        name: '',
        email: '',
        age: ''
      }
    }
  }
}
</script>

使用 Vue 3 Composition API

如果使用 Vue 3，可以通过 ref 或 reactive 定义响应式数据。

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  name: '',
  email: '',
  age: ''
})

const handleSubmit = () => {
  if (validateForm()) {
    console.log('提交数据：', formData)
    resetForm()
  }
}

const validateForm = () => {
  if (!formData.name) {
    alert('请输入姓名')
    return false
  }
  if (!formData.email.includes('@')) {
    alert('请输入有效的邮箱')
    return false
  }
  return true
}

const resetForm = () => {
  formData.name = ''
  formData.email = ''
  formData.age = ''
}
</script>

表单验证增强

可以使用第三方库如 vee-validate 或 element-ui 的表单组件增强验证功能。

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

<script>
export default {
  data() {
    return {
      formData: { name: '' },
      errors: { name: '' }
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.formData.name) {
        this.errors.name = '姓名不能为空'
        return false
      }
      return true
    }
  }
}
</script>

提交到后端 API

通过 axios 或 fetch 将表单数据提交到后端。

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return
    try {
      const response = await axios.post('/api/submit', this.formData)
      console.log('提交成功', response.data)
    } catch (error) {
      console.error('提交失败', error)
    }
  }
}

通过以上方法，可以灵活实现 Vue 中的新增表单功能，并根据需求扩展验证和提交逻辑。