element ui 对数组里面的多个相同的字段进行校验在

news2025/1/23 0:07:56

element ui 对数组里面的多个相同的字段进行校验

在 Element UI 中，如果需要对数组中的多个相同字段进行校验（例如动态生成的表单字段），可以通过动态绑定 prop 和 rules 来实现。以下是具体的实现方法：

示例场景

假设有一个数组 items，数组中的每个对象包含一个字段 value，我们需要对每个 value 进行校验。

实现代码

vue

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <!-- 动态生成表单项 -->
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :label="'字段 ' + (index + 1)"
      :prop="'items.' + index + '.value'"
      :rules="rules.value"
    >
      <el-input v-model="item.value"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="addItem">添加字段</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        items: [
          { value: '' }, // 初始字段
        ],
      },
      rules: {
        value: [
          { required: true, message: '请输入字段值', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功');
          console.log('表单数据:', this.form.items);
        } else {
          console.log('校验失败');
          return false;
        }
      });
    },
    // 添加新字段
    addItem() {
      this.form.items.push({ value: '' });
    },
  },
};
</script>

关键点说明

动态绑定 prop：
- 使用 :prop="'items.' + index + '.value'" 动态绑定每个表单项的 prop。
- prop 的格式需要与 form 对象的结构一致。例如，items.0.value 表示 form.items[0].value。
动态绑定 rules：
- 使用 :rules="rules.value" 动态绑定校验规则。
- 所有字段共享相同的校验规则。
form 数据结构：
- form.items 是一个数组，每个数组项是一个对象，包含需要校验的字段（如 value）。
动态添加字段：
- 通过 addItem 方法动态向 form.items 中添加新字段。
表单校验：
- 使用 this.$refs.form.validate 方法触发表单校验。
- 如果所有字段都通过校验，valid 为 true，否则为 false。

校验效果

每个字段都会根据 rules.value 的规则进行校验。
如果某个字段未通过校验，Element UI 会自动显示错误提示。
动态添加的字段也会自动应用校验规则。

扩展：自定义校验规则

如果需要为每个字段设置不同的校验规则，可以在 rules 中动态生成规则。例如：

javascript

rules: {
  value: (index) => [
    { required: true, message: `请输入字段 ${index + 1}`, trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
},

然后在 el-form-item 中动态绑定规则：

vue

:rules="rules.value(index)"