脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-form组件清除校验提示

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组件清除校验提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论