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实现图书管理功能
这篇文章主要为大家详细介绍了基于Vue实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Vue组合式API如何正确解构props不会丢失响应性
响应式 API 赋予了组合式 API 一大坨可能性的同时,代码精简,虽然但是,我们应该意识到响应性的某些陷阱,比如丢失响应性,在本文中,我们将学习如何正确解构 Vue 组件的 props,使得 props 不会丢失响应性
2024-01-01
vue proxyTable的跨域中pathRewrite配置方式
这篇文章主要介绍了vue proxyTable的跨域中pathRewrite配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
elementui的el-popover修改样式不生效的解决
在使用element-ui的时候，有一个常用的组件，那就是el-popover，本文就介绍一下elementui的el-popover修改样式不生效的解决方法，感兴趣的可以了解一下
2021-06-06
Vue 2.5.2下axios + express 本地请求404的解决方法
下面小编就为大家分享一篇Vue 2.5.2下axios + express 本地请求404的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
axios请求中以params或body形式传递参数的区别浅析
最近在做自己项目中,做一个非常简单的新增用户场景,但是使用原生axios发送post请求的时候,还是踩了不少坑的,下面这篇文章主要给大家介绍了关于axios请求中以params或body形式传递参数的区别的相关资料,需要的朋友可以参考下
2023-04-04
详解Vue的sync修饰符
.sync修饰符算是Vue的所有修饰符中较难理解的一个，本篇文章就带你走近.sync的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从指令 ->修饰符->.sync修饰符由浅入深地来讲解 .sync的含义及用法。
2021-05-05
Vue之自定义事件内容分发详解
这篇文章主要为大家介绍了Vue的自定义事件内容分发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
关于vue2使用swiper4的踩坑记录
最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
2022-01-01
Vue的elementUI实现自定义主题方法
下面小编就为大家分享一篇Vue的elementUI实现自定义主题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02