v-if与v-show对表单验证的影响以及解决办法

最新推荐文章于 2023-11-01 17:32:25 发布

原创最新推荐文章于 2023-11-01 17:32:25 发布 · 3.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue 同时被 3 个专栏收录

20 篇文章

订阅专栏

12 篇文章

订阅专栏

element-ui

11 篇文章

订阅专栏

本文探讨了Vue中v-if和v-show在处理动态显示隐藏元素时对表单验证的不同影响。使用v-show时，隐藏元素的表单验证依然存在，导致valid始终为false；而v-if会移除元素及其验证，但在切换时可能遗留上一个元素的验证状态。为了解决这个问题，提出了一种自定义表单验证规则的方法，通过在验证规则中加入条件判断，只在特定条件下执行表单验证，从而确保在切换类型时不会出现验证遗留问题。

一、v-if与v-show对表单验证的影响

当通过动态控制元素的显示隐藏时，频繁切换会使用 v-show ，否则 v-if 。

如果是对加了表单验证的元素进行显示隐藏，当使用 v-show 时，元素隐藏了，但是表单验证依旧存在，valid 永远返回 false

使用 v-if 时，元素和表单验证都不存在，但是在进行切换时，会遗留上一个元素的验证信息，使用感不好

二、解决表单验证遗留问题

使用 v-show ，再自定义表单验证规则

<el-form-item label="域名" prop="serverName" v-show="typeFlag===1">
	<el-input v-model="addForm.serverName" clearable></el-input>
</el-form-item>

addRules:{
	serverName: [
		{required: true, validator: this.checkServerName, trigger: 'blur'},
	]
}

checkServerName(rule,value,callback){
	//满足这个条件下才进行表单验证
	if(this.typeFlag === 1){
		if (!value) {
			callback(new Error('请输入域名'));
		} else {
			callback()
		}
	}else {
		callback()
	}
}