Vue循環(huán)組件加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">
  <h3>{{ title }}
   <el-button type="text" @click="add" class="button">添加</el-button>
  </h3>
  <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="手機(jī)" 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: '請輸入手機(jī)號碼', 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('請輸入正確的手機(jī)號碼！')
        }
       } else {
        callback('請輸入手機(jī)號碼!')
       }
      }
     }
    ]
   }
  }
 },
 methods: {
  validate () {
   return new Promise((resolve, reject) => {
    this.$refs.form.validate(valid => {
     if (valid) {
      resolve()
     } else {
      reject()
     }
    })
   })
  },
  remove () {
   this.$emit('remove', this.index)
  }
 }
}
</script>