vue实现表单

Vue 表单实现方法

双向数据绑定

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

<template>
  <input v-model="username" type="text" placeholder="用户名">
  <textarea v-model="message"></textarea>
  <select v-model="selected">
    <option value="A">选项A</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      message: '',
      selected: 'A'
    }
  }
}
</script>

表单验证

通过计算属性或第三方库（如 VeeValidate）实现表单验证。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="email" type="email">
    <span v-if="!isEmailValid">邮箱格式错误</span>
    <button type="submit">提交</button>
  </form>
</template>

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

动态表单

根据数据动态生成表单字段，适合字段数量不确定的场景。

<template>
  <div v-for="(field, index) in formFields" :key="index">
    <input v-model="field.value" :placeholder="field.placeholder">
  </div>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { value: '', placeholder: '字段1' },
        { value: '', placeholder: '字段2' }
      ]
    }
  }
}
</script>

表单提交处理

使用 @submit.prevent 阻止默认提交行为，在方法中处理表单数据。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // 提交数据到API
      console.log(this.formData)
    }
  }
}
</script>

表单组件封装

将表单封装为可复用的组件，通过 props 接收配置，$emit 提交事件。

<!-- FormComponent.vue -->
<template>
  <form @submit.prevent="$emit('submit', formData)">
    <slot></slot>
  </form>
</template>

<script>
export default {
  props: {
    initialData: Object
  },
  data() {
    return {
      formData: this.initialData || {}
    }
  }
}
</script>

<!-- 使用 -->
<template>
  <form-component :initial-data="{ name: '' }" @submit="handleSubmit">
    <input v-model="formData.name">
  </form-component>
</template>

第三方表单库

集成 VeeValidate 或 Element UI 等第三方库增强表单功能。

<template>
  <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(submit)">
      <ValidationProvider rules="required" v-slot="{ errors }">
        <input v-model="email">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
    </form>
  </ValidationObserver>
</template>

<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  methods: {
    submit() {
      // 提交逻辑
    }
  }
}
</script>

以上方法涵盖了 Vue 表单实现的主要场景，可根据实际需求选择合适的方式。