您的位置：首页 > Web前端 > Vue.js

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

2018-09-18 11:09 1266 查看

*父父组件（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多表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue validate 表单验证

相关文章推荐

新的分享

章节导航