element - - - - -form表单项 循环遍历校验规则(手机号校验)

0.官方示例

动态增减表单项

1.我实现的效果

2.我实现的代码

<template>
  <div>
    <el-form label-width="80px" ref="ruleForm" :model="formData">
      <el-form-item
        v-for="(item, index) in formData.phoneList"
        :label="'账号' + (index + 1)"
        :key="item.key"
        class="phone"
        :prop="'phoneList.' + index + '.value'"
        :rules="rules.phoneList"
      >
        <el-input autocomplete="off" v-model.number="item.value"></el-input>
        <el-button @click.prevent="removePhone(item)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="addPhone">新增账号</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "modify",
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      formData: {
        phoneList: [
          {
            value: null,
            key: Date.now()
          }
        ]
      },
      rules: {
        phoneList: [{ validator: checkPhone, trigger: "blur" }]
      }
    };
  },
  methods: {
    // 添加账号
    addPhone() {
      this.formData.phoneList.push({
        value: "",
        key: Date.now()
      });
    },
    // 删除账号
    removePhone(item) {
      var index = this.formData.phoneList.indexOf(item);
      if (index !== -1) {
        this.formData.phoneList.splice(index, 1);
      }
    },
    // 提交数据
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

注意：

1. 遍历出来的每一个el-form-item都需要添加prop以及rules
2. rules可以为提前定义好的规则，我校验的是手机号 如 :rules = "rules.phoneList"
   ( 因为我在data里定义的规则是 rules , 而手机需要的实际规则为phoneList. 根据实际情况自行修改 )
3. prop应该写成 如 :prop="'phoneList.' + index + '.value'"
   (prop格式为 " '遍历的数组 . ' " + 下标index + ' . 实际需要校验的key' )
   千万注意别写错了，不行复制去改吧