vue 实现表单

Vue 表单实现方法

Vue.js 提供了多种方式实现表单，包括双向数据绑定、表单验证和动态表单生成。以下是常见的实现方法：

基础表单绑定

使用 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)
    }
  }
}
</script>

表单验证

可以使用 Vue 的 computed 属性或第三方库如 VeeValidate 进行验证：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" placeholder="邮箱">
    <span v-if="!isEmailValid">邮箱格式不正确</span>
    <button type="submit" :disabled="!isFormValid">提交</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() {
      if (this.isFormValid) {
        console.log('表单提交成功')
      }
    }
  }
}
</script>

动态表单生成

根据数据动态渲染表单字段：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="field in formFields" :key="field.id">
      <label>{{ field.label }}</label>
      <input 
        v-model="formData[field.name]" 
        :type="field.type" 
        :placeholder="field.placeholder">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { id: 1, name: 'username', label: '用户名', type: 'text', placeholder: '输入用户名' },
        { id: 2, name: 'password', label: '密码', type: 'password', placeholder: '输入密码' }
      ],
      formData: {}
    }
  },
  created() {
    this.formFields.forEach(field => {
      this.$set(this.formData, field.name, '')
    })
  },
  methods: {
    handleSubmit() {
      console.log(this.formData)
    }
  }
}
</script>

表单组件封装

创建可复用的表单组件：

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

<script>
export default {
  props: {
    id: String,
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    value: String,
    placeholder: String
  }
}
</script>

使用封装组件：

<template>
  <form @submit.prevent="handleSubmit">
    <FormInput 
      id="username"
      label="用户名"
      v-model="formData.username"
      placeholder="输入用户名"
    />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import FormInput from './FormInput.vue'

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

表单提交与API集成

结合axios等库处理表单提交：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.email" placeholder="邮箱">
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? '提交中...' : '提交' }}
    </button>
  </form>
</template>

<script>
import axios from 'axios'

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