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

<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>

<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>

<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>