vue 实现表单

Vue 表单实现方法

使用 Vue 实现表单可以通过多种方式，包括基础表单绑定、表单验证以及第三方库集成。以下是常见的实现方法：

基础表单绑定

Vue 提供了 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>

表单验证

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

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" placeholder="邮箱" />
    <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;
    }
  },
  watch: {
    'formData.email'(value) {
      this.errors.email = value.includes('@') ? '' : '邮箱格式不正确';
    }
  },
  methods: {
    handleSubmit() {
      if (this.isValid) {
        console.log('提交数据:', this.formData);
      }
    }
  }
};
</script>

使用第三方库

VeeValidate 是一个流行的表单验证库，可以简化验证逻辑：

<template>
  <form @submit.prevent="handleSubmit">
    <Field name="email" v-model="email" rules="required|email" />
    <ErrorMessage name="email" />
    <button type="submit">提交</button>
  </form>
</template>

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

export default {
  components: { Field, ErrorMessage },
  data() {
    return { email: '' };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', { email: this.email });
    }
  }
};
</script>

动态表单生成

对于动态表单，可以通过遍历数组生成表单字段：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="field in formFields" :key="field.name">
      <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: [
        { name: 'username', label: '用户名', type: 'text', placeholder: '输入用户名' },
        { name: 'age', label: '年龄', type: 'number', placeholder: '输入年龄' }
      ],
      formData: {}
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData);
    }
  }
};
</script>