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

一、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()
	}
}