vue+element，循环多个el-form-item，并校验

// 
<template>
	<div style="width: 500px;">
		<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-dynamic">
			<el-form-item label="手机号" prop="phone">
			     <el-input v-model.number="form.phone"></el-input>
			</el-form-item>
		
		  </el-form-item>
		  
		  <div style='display:felx;align-items: center;'>
			 <el-form-item
			   v-for="(item, index) in form.list"
			   :label="'关联号码' + (index+1)"
			   :key="index"
			   :prop="'list.' + index + '.value'"
			   :rules="{required: true, message: '关联手机号不能为空', trigger: 'blur',validator: checkPhone}"
			 >
				<div style='display:felx;align-items: center;justify-content: space-between;'>
					<el-input v-model="item.value" style='width: 300px;'></el-input>
					<el-button @click.prevent="removeItem(item)">删除</el-button>
				</div>
				
			 </el-form-item> 
		  </div>
		<el-form-item>
		    <el-button type="primary" @click="submitForm('form')">提交</el-button>
		    <el-button @click="addItem">新增</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	var checkPhone = (rule, value, callback) =>{
		if (!value) {
			return callback(new Error('手机号不能为空'));
		} else {
			const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
			if (reg.test(value)) {
				callback();
			} else {
				return callback(new Error('请输入正确的手机号'));
			}
		}
	};
	
	
  export default {
    data() {
      return {
        form: {
         list: [],
         phone: ''
        },
		isAdd:false,
		 rules: {
			phone:[
				{ validator: checkPhone, trigger: 'blur',required: true, message: '手机号不能为空' }
			],
			
			
		}
	
      };
    },
    methods: {
		checkPhone(rule, value, callback){
			if (!value) {
				return callback(new Error('手机号不能为空'));
			} else {
				const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
				if (reg.test(value)) {
					callback();
				} else {
					return callback(new Error('请输入正确的手机号'));
				}
			}
		},
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
			let phoneList = []
			let params = {}
			if(this.isAdd){
				this.form.list.forEach((v,i)=>{
					if(this.form.phone != v.value){ //原来的号码 与 关联号不能重复
						if(phoneList.indexOf(v.value) == -1){ //关联号不重复, 处理参数
							phoneList.push(v.value)
							phoneList = phoneList.toString()
							params = {
										phone:this.form.phone+','+phoneList
									}
						}else{ //关联号重复, 终止
							params = {}
							this.$message.error('手机号不可重复');
							return false
						}
						 
					}else{ //原来的号码 与 关联号重复, 终止
					    params = {}
						this.$message.error('手机号不可重复');
						return false
					}
				})
			}else{
				params = {
					phone:this.form.phone
				}
			}
           
		 //params如果有，请求接口
			console.log(params)
			
          } else {
           return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeItem(item) {
        var index = this.form.list.indexOf(item)
        if (index !== -1) {
          this.form.list.splice(index, 1)
        }
		if(this.form.list==0){
			this.isAdd = false
		}
      },
      addItem() {
		   this.isAdd = true
			if(this.form.list.length>2){
				 this.$message.error('最多可关联3个手机号');
				 return false
			}else{
				this.form.list.push({
				  value: '',
				  key: Date.now()
				})
			}
			
		}  
       
      
    }
  }
</script>