vue快速实现表单

Vue 快速实现表单

使用 v-model 实现双向绑定

在 Vue 中，可以通过 v-model 指令快速实现表单元素的双向数据绑定。例如，输入框、复选框、单选按钮和下拉菜单都可以通过 v-model 绑定到组件的 data 或 setup 中的响应式数据。

<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 3 Composition API

在 Vue 3 中，可以使用 ref 或 reactive 结合 v-model 快速实现表单绑定。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" placeholder="邮箱" />
    <select v-model="formData.gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <button type="submit">提交</button>
  </form>
</template>

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

const formData = reactive({
  email: '',
  gender: 'male',
});

const handleSubmit = () => {
  console.log('提交的数据:', formData);
};
</script>

表单验证

可以使用 vee-validate 或手动验证逻辑实现表单校验。以下是手动验证的示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input 
      v-model="formData.username" 
      placeholder="用户名" 
      @blur="validateUsername"
    />
    <span v-if="errors.username">{{ errors.username }}</span>
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { username: '' },
      errors: { username: '' },
      isValid: false,
    };
  },
  methods: {
    validateUsername() {
      if (!this.formData.username) {
        this.errors.username = '用户名不能为空';
        this.isValid = false;
      } else {
        this.errors.username = '';
        this.isValid = true;
      }
    },
    handleSubmit() {
      if (this.isValid) {
        console.log('提交成功:', this.formData);
      }
    },
  },
};
</script>

使用第三方表单库

如果需要更强大的表单功能，可以使用第三方库如 Element Plus、Vuetify 或 Ant Design Vue。以下是 Element Plus 的示例：

<template>
  <el-form :model="formData" @submit.prevent="handleSubmit">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="password" />
    </el-form-item>
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form>
</template>

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

const formData = reactive({
  username: '',
  password: '',
});

const handleSubmit = () => {
  console.log('提交的数据:', formData);
};
</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: 'email', label: '邮箱', type: 'email', placeholder: '输入邮箱' },
        { id: 2, name: 'phone', label: '电话', type: 'tel', placeholder: '输入电话' },
      ],
      formData: {
        email: '',
        phone: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交的数据:', this.formData);
    },
  },
};
</script>