多个el-form校验

该代码示例展示了在Vue.js中如何进行组件化开发,包括创建两个表单组件(formOne和formTwo),处理表单数据的修改、验证以及重置功能。通过`handleUpdateClick`方法更新表单数据,`submitForm`方法调用子组件的验证并提交完整数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,父组件
<template>
	<div>
		<el-button type="success" @click="handleUpdateClick">修改</el-button>
		<form-one :formOne="formOne" :formOneRules="formOneRules" ref="pageFormOneRef"></form-one>
		<form-two :formTwo="formTwo" :formTwoRules="formTwoRules" ref="pageFormTwoRef"></form-two>
		<el-button type="primary" @click="submitForm">立即创建</el-button>
        <el-button @click="resetForm">重置</el-button>
	</div>	
</template>
<script>
	import formOne from './formOne';
	import formTwo from './formTwo';
	export default {
		components: {
			formOne,
			formTwo
		},
		data() {
			return {
				formOne: {
					name: '',
					region: '',
					resource: false,
					desc: ''
            	},
				formOneRules: {
					name: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' }
					],
					region: [
						{ required: true, message: '请选择活动区域', trigger: 'change' }
					],
					resource: [
						{ required: true, message: '请选择活动资源', trigger: 'change' }
					],
				},
				formTwo: {
					name2: '',
				},
				formTwoRules: {
					name2: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' }
					]
				}
			}
		},
		mounted() {
			
		},
		methods: {
			handleUpdateClick(){
				this.formOne = {
					name: '11111',
					region: '222222',
					resource: false,
					desc: '333333'
            	}
				this.formTwo = {
					name2:'aaaaaaa'
				}
			},
			formRulesValidate(fName,sName){
				return new Promise((resolve) => {
					this.$refs[fName].$refs[sName].validate(valid=>{
						if(valid) resolve(valid);
					})
				});
			},
			submitForm(){
				let formRulesOneRes = this.formRulesValidate('pageFormOneRef','formOneRef');
				let formRulesTwoRes = this.formRulesValidate('pageFormTwoRef','formTwoRef');
				Promise.all([ formRulesOneRes,formRulesTwoRes ]).then(() => {
					// console.log('校验成功')
					let form = {...this.formOne,...this.formTwo};
					console.log('form',form);
				});
			},
			resetRulesValidate(fName,sName){
				this.$refs[fName].$refs[sName].clearValidate();
			},
			resetForm(){
				this.resetRulesValidate('pageFormOneRef','formOneRef');
				this.resetRulesValidate('pageFormTwoRef','formTwoRef');
			},
		},
	}
</script>
<style scoped>

</style>

2,表单一
<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <span>基础信息</span>
            </div>
            <el-form :model="formOne" :rules="formOneRules" ref="formOneRef" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="formOne.name" style="width:100%;" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="活动区域" prop="region">
                            <el-select v-model="formOne.region" placeholder="请选择" style="width:100%;">
                                <!-- label:显示内容, value:绑定值 -->
                                <el-option label="区域一" value="绑定内容一"></el-option>
                                <el-option label="区域二" value="绑定内容二"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="特殊资源" prop="resource">
                            <el-radio-group v-model="formOne.resource">
                                <el-radio :label="false">线上品牌商赞助</el-radio>
                                <el-radio :label="true">线下场地免费</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="活动形式">
                            <el-input type="textarea" v-model="formOne.desc"  placeholder="请输入" style="width:100%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

    </div>
</template>
<script>
export default {
    props: {
		formOne:Object,
        formOneRules:Object,
    },
    data() {
        return {
            
        }
    },
    mounted() {

    },
    methods: {
      
    },
}
</script>
<style scoped></style>

3,表单二
<template>
    <div>
        <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>表单二</span>
            </div>
            <el-form :model="formTwo" :rules="formTwoRules" ref="formTwoRef" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="名称" prop="name2">
                            <el-input v-model="formTwo.name2" style="width:100%;"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>
<script>
export default {
    props: {
		formTwo:Object,
        formTwoRules:Object,
    },
    data() {
        return {
            
        }
    },
    mounted() {

    },
    methods: {
      
    },
}
</script>
<style scoped></style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值