elementUI form表单动态增减表单项自定义校验规则

一、效果：

二、代码：

<template>
  <div class="seed_consume">
    <el-form :model="form" :rules="rules" ref="form">
      <div class="itemBox">
        <div class="titleBox">
          <div class="left">
            <span class="title">2、待返发卖贴（转让）消耗种子</span>
            <el-button
              type="text"
              style="margin-left:40px;"
              :disabled="form.forumSaleList.length >= 10"
              @click="add_rules('forumSaleList','1')"
            >添加规则</el-button>
          </div>
        </div>
        <div class="item" v-for="(item,index) in form.forumSaleList" :key="index">
          <div style="margin-top:10px;">发帖+转让次数范围</div>
          <div style="width:100%;display:flex;margin-top:10px;">
            <el-form-item :prop="'forumSaleList.'+index+'.timesMin'" :rules="rules.times">
              <el-input v-model="item.timesMin" style="width:100px;"></el-input>-
            </el-form-item>
            <el-form-item :prop="'forumSaleList.'+index+'.timesMax'" :rules="rules.times">
              <el-input v-model="item.timesMax" style="width:100px;"></el-input>次
              <el-button
                type="text"
                style="margin-left:40px;"
                @click="del_rules('forumSaleList',index)"
                v-if="index > 0"
              >删除</el-button>
            </el-form-item>
          </div>
          <div>
            <span>扣除种子数量</span>
            <el-button
              type="text"
              style="margin-left:40px;"
              @click="add_rules_item('forumSaleList','1',index)"
            >添加规则</el-button>
          </div>
          <div
            style="width:100%;display:flex;margin-top:10px;"
            v-for="(ite,idx) in form.forumSaleList[index].detailList"
            :key="idx"
          >
            <el-form-item
              :prop="`forumSaleList.${index}.detailList.${idx}.periodMin`"
              :rules="rules.detailList.period"
            >
              <span>待返期数在</span>
              <el-input v-model="ite.periodMin" style="width:100px;"></el-input>-
            </el-form-item>
            <el-form-item
              :prop="`forumSaleList.${index}.detailList.${idx}.periodMax`"
              :rules="rules.detailList.period"
            >
              <el-input v-model="ite.periodMax" style="width:100px;"></el-input>
              <span>期，扣除售价</span>
            </el-form-item>
            <el-form-item
              :prop="`forumSaleList.${index}.detailList.${idx}.amountRate`"
              :rules="rules.detailList.amountRate"
            >
              <el-input v-model="ite.amountRate" style="width:100px;"></el-input>
              <span>%的种子+扣除固定种子</span>
            </el-form-item>
            <el-form-item
              :prop="`forumSaleList.${index}.detailList.${idx}.seedQuantity`"
              :rules="rules.detailList.seedQuantity"
            >
              <el-input v-model="ite.seedQuantity" style="width:120px;"></el-input>
              <el-button
                type="text"
                style="margin-left:40px;"
                @click="del_rules_item('forumSaleList',index,idx)"
                v-if="idx > 0"
              >删除</el-button>
            </el-form-item>
          </div>
        </div>
      </div>
	</el-form>
    <div class="btnBox">
      <el-button type="primary" @click="submitForm('form')">保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
  	// 自定义校验规则
    const times = (rule, value, callback) => {
      let a = /^[1-9]\d*$/;
      if (value < 1 || value > 5000) {
        callback(new Error("值区间：1-5000"));
      } else if (!a.test(value)) {
        callback(new Error("整数"));
      } else {
        callback();
      }
    };
    const period = (rule, value, callback) => {
      let a = /^(\d+\.\d{1,1}|\d+)$/;
      if (value < 0.5 || value > 1000000) {
        callback(new Error("值区间：0.5-1000000"));
      } else if (!a.test(value)) {
        callback(new Error("最多保留1位小数"));
      } else {
        callback();
      }
    };
    const amountRate = (rule, value, callback) => {
      let a = /^\d+(.\d{1,2})?$/;
      if (value < 0 || value > 1000) {
        callback(new Error("值区间：0-1000"));
      } else if (!a.test(value)) {
        callback(new Error("最多保留2位小数"));
      } else {
        callback();
      }
    };
    const seedQuantity = (rule, value, callback) => {
      let a = /^[0-9]\d*$/;
      if (value < 0 || value > 10000) {
        callback(new Error("值区间：0-10000"));
      } else if (!a.test(value)) {
        callback(new Error("整数"));
      } else {
        callback();
      }
    };

    return {
      form: {
        title: "",
        forumSaleList: [
          {
            timesMin: "",
            timesMax: "",
            detailList: [
              {
                subType: "1",
                periodMin: "",
                periodMax: "",
                amountRate: "",
                seedQuantity: ""
              }
            ]
          }
        ],
      },
      rules: {
        times: { required: true, validator: times, trigger: "blur" },
        times5: { required: true, validator: times5, trigger: "blur" },
        detailList: {
          period: { required: true, validator: period, trigger: "blur" },
          amountRate: {
            required: true,
            validator: amountRate,
            trigger: "blur"
          },
          seedQuantity: {
            required: true,
            validator: seedQuantity,
            trigger: "blur"
          }
        },
      }
    };
  },
  created() {},
  methods: {
    // 保存
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let form = this.form;
          console.log(form);
        } else {
          this.$message.error("请检查输入格式");
          return false;
        }
      });
    },
  }
};
</script>

前端进阶精选：点此去