当前位置：首页 > article >正文

element-plus校验单个form对象合法性

article 2024/11/2 13:09:05

在 Vue 中，循环生成的表单列表，并且每个表单中包含多个对象，使用 v-for 来创建这些表单，并且使用动态 prop 路径来验证单个对象是否满足必填校验。

<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <div v-for="(item, index) in form.items" :key="index">
      <el-form-item :prop="`items.${index}.name`" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
        <el-input v-model="item.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item :prop="`items.${index}.email`" :rules="[{ required: true, message: '邮箱不能为空', trigger: 'blur' }]">
        <el-input v-model="item.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <!-- 更多的表单项 -->
    </div>
    <el-button @click="validateSingleItem(0)">验证第一个对象</el-button>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

const formRef = ref(null);
const form = reactive({
  items: [
    { name: '', email: '' },
    { name: '', email: '' },
    // ...更多对象
  ]
});

const rules = {
  items: form.items.map((_, index) => ({
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
  }))
};

function validateSingleItem(index) => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log(`第 ${index} 个对象验证通过`);
    } else {
      console.log(`第 ${index} 个对象验证失败`);
    }
  }, `items.${index}`); // 验证指定索引的对象
};
</script>

<style>
/* 样式根据需要添加 */
</style>

使用 v-for 循环来生成表单列表，每个表单项都有一个 el-form-item。
使用 :prop 动态绑定每个表单项的验证路径。
使用 :rules 动态绑定每个表单项的验证规则。
定义了一个 validateSingleItem 方法来调用 el-form 的 validate 方法，并传入验证路径 items.${index}，这将验证指定索引的对象是否满足必填条件。