多个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>

### 如何清空 `el-form` 的校验规则 在 Vue 和 Element-UI 中,如果需要清空 `el-form` 的校验规则 (`rules`),可以通过以下方法实现: #### 方法一:重置整个表单 通过调用 `this.$refs.formRef.resetFields()` 可以重置表单中的字段值以及移除校验结果。此操作会将表单恢复到初始状态,并清除所有的校验提示信息[^1]。 ```javascript this.$refs.formRef.resetFields(); ``` 该方法适用于希望完全重置表单的情况,但它不仅会清除校验错误消息,还会将表单数据还原为默认值。 --- #### 方法二:手动设置 `rules` 属性为空对象 可以直接修改绑定的 `rules` 对象,将其设为空对象 `{}` 或者删除特定字段的校验规则。例如: ```javascript this.formRules = {}; // 完全清空所有校验规则 ``` 或者仅针对某个字段清空其校验规则: ```javascript this.formRules.department = []; // 清空 department 字段的校验规则 ``` 这种方法允许更细粒度地控制哪些字段需要保留或移除校验规则[^2]。 --- #### 方法三:动态调整 `rules` 并重新绑定 当需要动态更新校验规则时,可以先解绑当前的 `rules`,再重新绑定新的规则(甚至是一个空对象)。例如: ```javascript this.$set(this, 'formRules', {}); // 使用 $set 更新响应式属性 ``` 这种方式特别适合于复杂场景下动态切换不同校验逻辑的需求[^3]。 --- #### 注意事项 1. **确保 `ref` 已正确定义** 调用 `resetFields()` 前,必须确认已给 `<el-form>` 设置了一个有效的 `ref` 名称,比如 `ref="formRef"`。 2. **保持字段名一致性** 如果更改了 `rules`,则应同步检查对应的 `prop` 是否匹配,否则可能导致部分校验失效[^4]。 3. **避免直接覆盖原始数据结构** 修改 `rules` 时建议深拷贝原对象后再操作,以免影响其他依赖相同数据的部分。 --- ### 示例代码 以下是综合以上方法的一个完整示例: ```vue <template> <el-form ref="formRef" :model="formLabel" :rules="formRules"> <el-form-item label="部门" prop="department"> <el-input v-model="formLabel.department"></el-input> </el-form-item> <!-- 更多表单项 --> </el-form> </template> <script> export default { data() { return { formLabel: {}, formRules: { department: [ { required: true, message: "请输入...", trigger: "change" } ] } }; }, methods: { clearValidation() { this.$refs.formRef.resetFields(); // 方法一:重置表单 this.formRules = {}; // 方法二:清空 rules } } }; </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值