Element UI 2.x 校验数组每个对象中的name不能为空

在 Element UI 2.x 中验证数组中多个对象的 name 字段不能为空，需要结合 el-form + el-form-item 的 prop 属性和自定义校验规则实现。核心是通过 prop 绑定数组索引 来定位每个对象的 name，并统一设置校验规则。

完整实现步骤

1. 基础结构（HTML 部分）

循环渲染数组时，给每个 el-form-item 的 prop 设置为 数组名[索引].字段名（如 list[0].name），确保表单能识别每个元素的字段：

vue 复制代码

<template>
  <el-form 
    ref="form" 
    :model="form" 
    :rules="rules" 
    label-width="80px"
  >
    <!-- 循环渲染数组中的对象 -->
    <div v-for="(item, index) in form.list" :key="index">
      <!-- prop 格式：数组字段名[索引].要校验的字段名 -->
      <el-form-item 
        label="名称" 
        :prop="`list[${index}].name`"  <!-- 关键：绑定索引和字段 -->
        :rules="rules.name"  <!-- 复用同一个校验规则 -->
      >
        <el-input v-model="item.name"></el-input>
      </el-form-item>
    </div>

    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

2. 数据与校验规则（JS 部分）

在 data 中定义表单数据（包含数组 list）；
在 rules 中给 name 字段设置 非空校验规则（支持自定义提示）：

javascript 复制代码

<script>
export default {
  data() {
    return {
      form: {
        // 要校验的数组，每个对象包含 name 字段
        list: [
          { name: '' },  // 第一个对象
          { name: '' },  // 第二个对象
          { name: '' }   // 可动态添加更多
        ]
      },
      rules: {
        // 校验 name 字段的规则（适用于数组中所有对象）
        name: [
          { 
            required: true, 
            message: '名称不能为空',  // 自定义提示文字
            trigger: 'blur'  // 失焦时触发校验
          }
        ]
      }
    };
  },
  methods: {
    // 提交表单时手动校验
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('校验通过');
        } else {
          this.$message.error('请完善所有必填项');
          return false;
        }
      });
    }
  }
};
</script>

3. 动态添加/删除数组元素（扩展场景）

如果数组长度是动态变化的（如可点击添加新对象），需要确保新增元素也能被校验。关键是 保持 prop 与数组索引同步：

vue 复制代码

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <div v-for="(item, index) in form.list" :key="index">
      <el-form-item 
        label="名称" 
        :prop="`list[${index}].name`" 
        :rules="rules.name"
      >
        <el-input v-model="item.name"></el-input>
        <!-- 删除当前行 -->
        <el-button 
          type="danger" 
          icon="el-icon-delete" 
          @click="form.list.splice(index, 1)"
        ></el-button>
      </el-form-item>
    </div>

    <!-- 添加新行 -->
    <el-button type="primary" @click="form.list.push({ name: '' })">
      添加
    </el-button>
    <el-button type="success" @click="submitForm">提交</el-button>
  </el-form>
</template>

新增元素时，form.list.push({ name: '' }) 会自动触发循环，prop 会随索引动态更新；
删除元素后，索引重新排序，prop 也会自动适配，无需额外处理。

核心原理

prop 的绑定格式 ：数组字段名[索引].字段名（如 list[0].name）是 Element UI 识别数组内字段的固定语法，必须严格遵循；
复用校验规则 ：通过 :rules="rules.name" 让数组中所有对象的 name 字段共享同一套非空校验规则，避免重复定义；
动态校验适配 ：数组长度变化时，只要 v-for 的 index 正确，prop 会自动关联新元素，确保校验生效。

常见问题

校验不生效？ 检查 prop 格式是否正确（是否包含数组名、索引、字段名），或 v-model 是否正确绑定到 item.name；
提示信息不显示？ 确保 rules 中定义了 message，且 trigger 触发方式（blur/change）与交互匹配；
动态添加后不校验？ 新增元素时需初始化 name: ''（避免 undefined），否则校验可能失效。

按照这个方式，即可实现数组中所有对象 name 字段的非空校验，且支持动态增删场景。