vue实现表单组件

实现基础表单结构

使用 Vue 的 v-model 实现双向数据绑定，结合原生 HTML 表单元素（如 input、select）。示例代码：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" type="text" 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>

表单验证逻辑

通过计算属性或第三方库（如 VeeValidate）实现验证。以下为手动验证示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input 
      v-model="formData.email" 
      type="email" 
      placeholder="邮箱"
      @blur="validateEmail"
    />
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { email: '' },
      errors: { email: '' }
    }
  },
  computed: {
    isValid() {
      return !this.errors.email && this.formData.email;
    }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.errors.email = regex.test(this.formData.email) ? '' : '邮箱格式无效';
    },
    handleSubmit() {
      if (this.isValid) {
        console.log('验证通过:', this.formData);
      }
    }
  }
}
</script>

动态表单字段

根据数据动态渲染表单字段，适用于字段数量不固定的场景：

<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);
    },
    handleSubmit() {
      console.log('动态字段数据:', this.dynamicFields);
    }
  }
}
</script>

表单组件化

将表单拆分为可复用的子组件，提升代码可维护性：

<!-- 父组件 -->
<template>
  <FormWrapper @submit="handleSubmit">
    <FormInput v-model="formData.name" label="姓名" />
    <FormSelect v-model="formData.role" :options="roles" />
  </FormWrapper>
</template>

<script>
import FormWrapper from './FormWrapper.vue';
import FormInput from './FormInput.vue';
import FormSelect from './FormSelect.vue';

export default {
  components: { FormWrapper, FormInput, FormSelect },
  data() {
    return {
      formData: { name: '', role: '' },
      roles: ['管理员', '用户', '访客']
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('提交数据:', data);
    }
  }
}
</script>

<!-- FormInput.vue 子组件 -->
<template>
  <div>
    <label>{{ label }}</label>
    <input :value="value" @input="$emit('update:value', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value', 'label']
}
</script>

第三方库集成

使用 VeeValidate 或 Element UI 等库快速实现高级功能：

<template>
  <Form @submit="handleSubmit">
    <Field name="email" rules="required|email" v-slot="{ field, errors }">
      <input v-bind="field" type="email" />
      <span>{{ errors[0] }}</span>
    </Field>
    <button type="submit">提交</button>
  </Form>
</template>

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

export default {
  components: { Form, Field },
  methods: {
    handleSubmit(values) {
      console.log('验证通过:', values);
    }
  }
}
</script>