*父父組件(helloWorld.vue):
從網(wǎng)站建設(shè)到定制行業(yè)解決方案,為提供成都做網(wǎng)站、成都網(wǎng)站制作服務(wù)體系,各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案,助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)建站將不斷加快創(chuàng)新步伐,提供優(yōu)質(zhì)的建站服務(wù)。
<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"> <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>
*子組件(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="手機(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>
以上這篇Vue循環(huán)組件加validate多表單驗證的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
新聞標(biāo)題:Vue循環(huán)組件加validate多表單驗證的實(shí)例
文章出自:http://bm7419.com/article0/jciioo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站維護(hù)、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)