把需要自定义校验的数据放在一个对象中,方便以后多个字段校验
customVerifyInps:{
communityInp2:"",
asPathInp:"",
},
在输入框中绑定id
<el-input
id="communityInp2"
placeholder=""
v-model="customVerifyInps.communityInp2"
:validate-event="true"
>
</el-input>
在你提交事件中加上校验方法(根据场景加对应的的方法,我这里是点击事件后出发),通过document获取到目标元素改变他的边框
UpdateAllClick(){
// 校验
let type=false
for (let i in this.customVerifyInps){
if (this.customVerifyInps[i]==''){
document.querySelector('#'+i).style.borderColor='red'
type=true
}
}
if (type){
return this.$message({
message: '检查表单是否填写完整。',
type: 'error'
});
}
},
当输入内容是需要红色边框,加个input事件内容改变就还原边框颜色
<el-input
id="asPathInp"
placeholder=""
v-model="customVerifyInps.asPathInp"
:validate-event="true"
@input="inputEnv('asPathInp')"
>
</el-input>
// 输入框输入事件
inputEnv(name){
document.querySelector('#'+name).style.borderColor=''
}