【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）

前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。

1. 模板中的 form 需要绑定 mode、 ref 、rules 这些必需属性（很熟悉了，不用解释干嘛的了）

<el-form
      ref="rewardTaskRuleVoForm"
      :model="rewardTaskRuleVo"
      inline
      label-width="120px"
      :rules="rules">
</el-form>

2. 定义需要的数据和规则

rewardTaskRuleVo: {
   rewardCalculateFormula: [{}],
}

const checkNumMax = (rule, value, callback) => {
  const index = rule.field.split('').findIndex(item => /[0-9]/.test(item))
  const obj = this.rewardTaskRuleVo.rewardCalculateFormula[rule.field[index]]
  if (!value) {
    callback(new Error('最大单量不能为空'))
  } else if (value <= obj.numMin) {
    callback(new Error('不能小于当前阶梯最小单量，且不能大于下一阶梯最小单量'))
  } else {
    callback()
  }
}
const checkNumMin = (rule, value, callback) => {
  const index = rule.field.split('').findIndex(item => /[0-9]/.test(item))
  const obj = this.rewardTaskRuleVo.rewardCalculateFormula[rule.field[index]]
  if (!value) {
    callback(new Error('最小单量不能为空'))
  } else if (value >= obj.numMax) {
    callback(new Error('不能大于当前阶梯最大单量，且不能低于上一阶梯最大单量'))
  } else {
    callback()
  }
}

rules: {
 numMax: [{ required: true, validator: checkNumMax }],
 numMin: [{ required: true, validator: checkNumMin }],
 amount: [{ required: true, message: '请输入奖励金额', trigger: ['trigger', 'change'] }]
}

3. 循环的表单 el-form-item 中绑定规则

<el-form-item label="奖励计算公式:" prop="rewardCalculateFormula" required>
  <br>
  <!-- {{ rewardTaskRule    Vo.rewardCalculateFormula }} -->
  <div v-for="(item,index) in rewardTaskRuleVo.rewardCalculateFormula" :key="index" class="formula">
    <div>
      <strong>阶梯 {{ index + 1 }}：</strong>
      <div style="float: right">
        <el-link v-if="index > 0" type="primary" style="margin-right: 20px" @click="formulaHandle('minus', index)">删除阶梯</el-link>
        <el-link type="success" @click="formulaHandle('plus', index)">增加阶梯</el-link>
      </div>
    </div>
    <div style="margin-left: 12px">
      <strong>单量：</strong>
      <el-form-item :prop="`rewardCalculateFormula[${index}].numMin`" :rules="rules.numMin"><el-input-number v-model="item.numMin" controls-position="right" :min="index > 0 ? rewardTaskRuleVo.rewardCalculateFormula[index-1].numMax + 1 : 1" :precision="0" size="small" @change="checkMin(item, index)" /></el-form-item>
      ——
      <el-form-item :prop="`rewardCalculateFormula[${index}].numMax`" :rules="rules.numMax"><el-input-number v-model="item.numMax" controls-position="right" :min="1" :precision="0" size="small" @change="checkMax(item, index)" /></el-form-item>
      <strong style="margin-left: 20px">奖励金额：</strong>
      <el-form-item :prop="`rewardCalculateFormula[${index}].amount`" :rules="rules.amount"><el-input-number v-model="item.amount" controls-position="right" :min="1" size="small" /></el-form-item>
    </div>
  </div>
</el-form-item>

4. 提交表单校验

this.$refs.rewardTaskRuleVoForm.validate(async valid => {
  if (!valid) return this.$message.error('请检查奖励配置输入内容是否符合规则！')
  if (this.rewardTaskRuleVo?.rewardCalculateFormula?.length) {
    const result = this.rewardTaskRuleVo.rewardCalculateFormula.every(v => v.numMax && v.numMin && v.amount)
    if (!result) return this.$message.error('奖励计算公式内容不能为空！')
  }

  this.form.rewardTaskRuleVo = { ...this.rewardTaskRuleVo }
  const data = this.mergeData(this.form)
  
  # .... 接口代码 ....
})

5. 其它辅助验证代码

checkMax(item, index) {
  this.$nextTick(() => {
    if (item.numMax <= item.numMin) {
      item.numMax = item.numMin + 1
      this.$set(this.rewardTaskRuleVo.rewardCalculateFormula, index, item)
    }

    if (item.numMax >= this.rewardTaskRuleVo.rewardCalculateFormula[index + 1]?.numMin) {
      item.numMax = this.rewardTaskRuleVo.rewardCalculateFormula[index + 1].numMin - 1
    }

    if (this.rewardTaskRuleVo.rewardCalculateFormula[index + 1]) {
      this.rewardTaskRuleVo.rewardCalculateFormula[index + 1].numMin = item.numMax + 1
      this.rewardTaskRuleVo.rewardCalculateFormula[index + 1].numMax = item.numMax + 2
    }
  })
},
checkMin(item, index) {
  this.$nextTick(() => {
    if (item.numMax <= item.numMin) {
      item.numMin = item.numMax - 1
      this.$set(this.rewardTaskRuleVo.rewardCalculateFormula, index, item)
    }
  })
}

不足之处，多多交流。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址