Vue循环组件加validate多表单验证的实例

*父父组件（helloWorld.vue）:

<template>
<div class="hello-world">
 <el-button type="text" @click="saveAll" class="button">SAVE</el-button>
 <promise-father ref="promiseFather"></promise-father>
</div>
</template>
<script>
import PromiseFather from './promiseFather'
export default {
name: `HelloWorld`,
components: { PromiseFather },
data () {
 return {
  promiseFather: ''
 }
},
methods: {
 saveAll () {
  this.$refs.promiseFather.validate(valid => {
   if (valid) {
    this.$message.success('(^o^)~ 验证成功！')
   } else {
    this.$message.error('-_- 验证失败！')
   }
  })
 }
}
}
</script>
<style scoped>
.button {
 position: absolute;
 top: 60px;
 left: 660px;
}
</style>

*父组件（promiseFather.vue）:

<template>
<div class="promise-father">
 <h2>{{ title }}
  <el-button type="text" @click="add" class="button">添加</el-button>
 </h2>
 <div v-for="(item, index) in validateSet" :key="item.id">
  <promise-child ref="promiseChild" :formData="item" :index="index" @remove="remove"></promise-child>
 </div>
</div>
</template>
<script>
import uuid from 'uuid'
import PromiseChild from '@/components/promiseChild'
export default {
name: `PromiseFather`,
components: {
 PromiseChild
},
data () {
 return {
  title: 'WHY! mtw',
  promiseChild: '',
  validateSet: []
 }
},
methods: {
 validate (callback) {
  if (this.validateSet && this.validateSet.length > 0) {
   const promiseList = []
   this.$refs.promiseChild.forEach((item, index) => {
    promiseList.push(item.validate())
   })
   Promise.all(promiseList).then(() => {
    callback(true)
   }).catch(() => {
    callback(false)
   })
  } else {
   callback(true)
  }
 },
 add () {
  this.validateSet.push({
   name: '',
   phone: '',
   id: uuid.v4()
  })
 },
 remove (num) {
  this.validateSet.splice(num, 1)
 }
}
}
</script>
<style scoped>
.index {
 margin-left: -546px;
}
.button {
 margin-left: 60px;
}
</style>

*子组件（promiseChild.vue）:

<template>
<div class="promise-child">
 <el-form :model="form" ref="form" :rules="formRules" :inline="true" label-position="right">
  <el-form-item :label="`${index + 1}`+'、'">
  </el-form-item>
  <el-form-item label="姓名" prop="name">
   <el-input v-model="form.name" size="small"></el-input>
  </el-form-item>
  <el-form-item label="手机" prop="phone">
   <el-input v-model="form.phone" size="small"></el-input>
  </el-form-item>
  <el-form-item>
   <el-button @click="remove" size="small">删除</el-button>
  </el-form-item>
 </el-form>
</div>
</template>
<script>
import uuid from 'uuid'
export default {
name: `PromiseChild`,
props: {
 formData: Object,
 index: Number
},
data () {
 return {
  form: {
   name: '',
   phone: '',
   id: uuid.v4()
  },
  formRules: {
   name: [
    { required: true, message: '请输入姓名！', trigger: 'blur' }
   ],
   phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { max: 11, message: '长度不能超过11', trigger: 'blur' },
    {
     validator: (rules, value, callback) => {
      if (value) {
       let regPhone = /^(13[0-9]|15[012356789]|18[0123456789]|147|145|17[0-9])\d{8}$/
       if (regPhone.test(value)) {
        callback()
       } else {
        callback('请输入正确的手机号码！')
       }
      } else {
       callback('请输入手机号码!')
      }
     }
    }
   ]
  }
 }
},
methods: {
 validate () {
  return new Promise((resolve, reject) => {
   this.$refs.form.validate(valid => {
    if (valid) {
     resolve()
    } else {
     reject()
    }
   })
  })
 },
 remove () {
  this.$emit('remove', this.index)
 }
}
}
</script>

来源：https://blog.csdn.net/IH1107/article/details/79170427