el-form组件清除校验提示正确方法(前端技能提升)
更新时间：2023年12月25日 11:39:14 作者：码路老默007
el-form组件提供了表单验证的功能,可以通过在el-form上绑定rules属性,并在el-form-item上设置prop属性来进行校验,这篇文章主要给大家介绍了关于el-form组件清除校验提示正确方法(前端技能提升)的相关资料,需要的朋友可以参考下
错误效果
错误描述
在切换radio切换的时候校验提示提示出来了，本身不应该出来但是如何取消呢？因为在切换时候我们置空但是并没有取消校验，所以从通过到拒绝置空时候肯定会出现提示语，那么我们把提示校验的方法去掉就行了。
错误代码
reviewStateChange(val) {
if (val === '2') {
this.ruleForm.remark = ''
}
if (val === '3') {
this.ruleForm.remark = ''
}
}正确代码
reviewStateChange(val) {
if (val === '2') {
this.ruleForm.remark = ''
}
if (val === '3') {
this.ruleForm.remark = ''
// this.$nextTick(() => {
// this.$refs.ruleForm.resetFields()
// })
this.$nextTick(() => {
this.$refs.ruleForm.clearValidate() // 只清除清除验证
})
}
}总结方法
①清除表单内容和清除表单验证消息
this.$nextTick(()=>{
this.$refs.form.resetFields();
})
②只清除表单验证消息、不清楚表单内容
this.$nextTick(()=>{
this.$refs['form'].clearValidate() // 只清除清除验证
})
正确样式
场景延申
我们在页面切换的时候使用同一个Form组件，我们就需要把校验的结果给去掉，虽然不影响功能，但是页面显示给人感觉不太好。
到此这篇关于el-form组件清除校验提示正确方法的文章就介绍到这了,更多相关el-form组件清除校验提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue跳转同一个路由参数不同的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue中bus的使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了Vue列表渲染的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue 项目代理设置的优化功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了Vue3页面如何自适应表格滚动高度,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
我们在使用element-ui的时候经常会遇到需要修改组件默认样式,下面这篇文章主要给大家介绍了关于element-ui中样式覆盖问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue 父子组件共用mixins的注意点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3中element-plus全局使用Icon图标的过程详解
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要为大家介绍了为Vue3 组件标注 TS 类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
Vue3中watch监听对象的属性值(监听源必须是一个getter函数)
这篇文章主要介绍了Vue3中watch监听对象的属性值，监听源必须是一个getter函数,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
最新评论