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

*父父组件（helloWorld.vue）:<template><divclass="hello-world"><el-buttontype="text"@click="saveAll"

*父父组件（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>

以上这篇Vue循环组件加validate多表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。