Vue循环组件加validate多表单验证的实例
程序员文章站
2023-11-29 15:33:16
*父父组件（helloworld.vue）:
<...
*父父组件（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多表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。