VUE的动态表单

 　　　　<div v-for="(item, index) in form.domains" :key="item.key">
            <el-row>
              <!-- 循环 -->
              <el-col :span="8">
                <el-form-item
                  size="mini"
                  class="newLine"
                  :key="item.key"
                  :rules="rules.startNum"
                  :prop="'domains.' + index + '.startNum'"
                >
                  <el-input
                    v-model.trim="item.startNum"
                    style="width: 90%"
                    type="number"
                    @input="change(item.startNum, index)"
                    placeholder="请输入卡号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  size="mini"
                  class="newLine"
                  :rules="{
                    required: true,
                    message: '张数不能为空',
                    trigger: 'blur',
                  }"
                  :prop="'domains.' + index + '.nums'"
                >
                  <el-input
                    style="width: 100%"
                    type="number"
                    @input="change1(item.nums, index)"
                    v-model="item.nums"
                    oninput='if(value>9999){value=9999}else if(value<0){value=1}else {this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")}'
                    placeholder="输入张数"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  size="mini"
                  class="newLine"
                  :prop="'domains.' + index + '.endNum'"
                >
                  <el-input
                    style="width: 100%"
                    type="number"
                    :readonly="true"
                    v-model="item.endNum"

                    placeholder="结束的卡号"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button
                  size="mini"
                  circle
                  type="danger"
                  @click="deleteRules(item, index)"
                  icon="el-icon-delete"
                ></el-button>
              </el-col>
              <!-- end -->
            </el-row>
          </div>

rules下的自定义校验规则

startNum: [{ validator: card, trigger: "blur" }],
saoNum: [{ validator: cardss, trigger: "blur" }],
cardNum: [{ validator: cards, trigger: "blur" }],

let card = (rule, value, callback) => {
      var e = /^\d{14}$/;
      if (!value) callback();
      if (!e.test(value)) {
        callback(new Error("账号必须是由14位数字"));
      } else {
        callback();
      }
    };
    let cards = (rule, value, callback) => {
      if (!value) {
        callback();
      }
      if (this.form.cardNum) {
        // this.form.cardNum = "";
        var arr = this.form.cardNum.split("，");
        let lens = arr.map((item) => item.length);
        let minLen = Math.min.apply(null, lens);
        let maxLen = Math.max.apply(null, lens);
        let str = arr[lens.indexOf(minLen)];
        let strs = arr[lens.indexOf(maxLen)];

        if (str.length != 14 || strs.length != 14) {
          callback(new Error("账号必须是由14位数字"));
        } else {
          callback();
        }
      }
    };
    let cardss = (rule, value, callback) => {
      if (!value) {
        callback();
      }
      if (this.form.saoNum) {
        // this.form.saoNum = "";
        var arr = this.form.saoNum.split("，");
        let lens = arr.map((item) => item.length);
        let minLen = Math.min.apply(null, lens);
        let maxLen = Math.max.apply(null, lens);
        let str = arr[lens.indexOf(minLen)];
        let strs = arr[lens.indexOf(maxLen)];

        if (str.length != 14 || strs.length != 14) {
          callback(new Error("账号必须是由14位数字"));
        } else {
          callback();
        }
      }
    };

添加的事件

addNum() {
      if (this.form.domains.length != 0) {
        var start = this.form.domains[this.form.domains.length - 1].startNum;
        var num = this.form.domains[this.form.domains.length - 1].nums;
        if (start && num) {
          this.form.domains.push({
            startNum: "",
            nums: "",
            endNum: "",
            key: Date.now(),
          });
        } else {
          this.$message({
            center: true,
            message: "请输入卡号后在新增",
            type: "info",
          });
        }
      } else {
        this.form.domains.push({
          startNum: "",
          nums: "",
          endNum: "",
          key: Date.now(),
        });
      }
      this.$forceUpdate();
    },

删除的事件

  deleteRules(item, index) {
      this.index = this.form.domains.indexOf(item);
      if (index !== -1) {
        this.form.domains.splice(index, 1);
      }
      this.$forceUpdate();
    },

效果如图 且 不输入新的卡号 无法添加