Vue项目中巧妙实现循环生成的表单校验：一键触发，高效便捷

2024-01-18 21:47:41

通过循环触发多个表单校验：提高开发效率

在现代前端开发中，表单校验是至关重要的。Vue.js因其高效、灵活的特性而备受青睐，但当需要处理多个动态生成的表单时，为每个表单设置ref属性进行校验可能会变得繁琐。本文将提供一种巧妙的方法，只需一次点击事件即可触发通过循环生成的多个表单校验，从而提高开发效率和代码简洁性。

准备工作

首先，确保已在项目中安装了ElementPlus UI库：

npm install element-plus

创建表单组件

1. FormItem、Input、Button组件：

<template>
  <div class="form-container">
    <form @submit.prevent="handleSubmit">
      <div v-for="(item, index) in formItems" :key="index">
        <el-form-item :label="item.label">
          <el-input v-model="item.value" :ref="'input' + index" />
        </el-form-item>
      </div>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </form>
  </div>
</template>

2. formItems（ref）：

const formItems = ref([
  { label: '姓名', value: '' },
  { label: '年龄', value: '' },
  { label: '地址', value: '' },
]);

触发表单校验

1. 触发input事件：

const handleSubmit = () => {
  const inputs = document.querySelectorAll('input');
  inputs.forEach((input) => {
    input.dispatchEvent(new Event('input'));
  });
};

2. 使用ElementPlus UI库的validate()方法：

const isValid = this.$refs.form.validate();
if (isValid) {
  // 表单校验通过
} else {
  // 表单校验未通过
}

示例代码

<template>
  <div class="form-container">
    <form @submit.prevent="handleSubmit">
      <div v-for="(item, index) in formItems" :key="index">
        <el-form-item :label="item.label">
          <el-input v-model="item.value" :ref="'input' + index" />
        </el-form-item>
      </div>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </form>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { FormItem, Input, Button } from 'element-plus';

export default defineComponent({
  components: {
    FormItem,
    Input,
    Button,
  },
  setup() {
    const formItems = ref([
      { label: '姓名', value: '' },
      { label: '年龄', value: '' },
      { label: '地址', value: '' },
    ]);

    const handleSubmit = () => {
      const inputs = document.querySelectorAll('input');
      inputs.forEach((input) => {
        input.dispatchEvent(new Event('input'));
      });

      const isValid = this.$refs.form.validate();
      if (isValid) {
        // 表单校验通过
        console.log('表单校验通过');
      } else {
        // 表单校验未通过
        console.log('表单校验未通过');
      }
    };

    return {
      formItems,
      handleSubmit,
    };
  },
});
</script>