*父父组件（helloWorld.vue）:
<template> <div> <el-button type="text" @click="saveAll">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> <h2>{{ title }} <el-button type="text" @click="add">添加</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> <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多表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: