Vue取消表单校验提示的方法

正确方法:

javascript 复制代码
this.$refs["myform"].clearValidate();

不要使用,因为它会清楚提示的同时把表单值还原为初始值

javascript 复制代码
this.$refs["myform"].resetFields();

完整代码:

html 复制代码
<a-form-model :model="myform" ref="myform" :rules="rules">
            <a-form-model-item label="名称" prop="name">
              <a-input v-model="myform.name"></a-input>
            </a-form-model-item>
</a-form-model>
javascript 复制代码
data() {
      return {
        myform: {
          name: ''
        },
        rules:{
              //表单验证
              name: [{ required: true, message: '必填', trigger: 'blur' },
        },
},
...
watch:{
        myform: {
            handler(newObj,oldObj){
                if(newObj.name!=""){
                    this.$refs["myform"].clearValidate(); //清除所有校验规则
                }
            },
            deep:true
        }
},
相关推荐
小江的记录本18 分钟前
【AI大模型选型指南】《2026年5月(最新版)国内外主流AI大模型选型指南》(个人版)
前端·人工智能·后端·ai·aigc·ai编程·ai写作
@PHARAOH32 分钟前
HOW - 前端输入场景支持拼音匹配
前端
计算机安禾42 分钟前
【c++面向对象编程】第21篇:运算符重载基础:语法、规则与不可重载的运算符
java·前端·c++
__log1 小时前
Vue 3 核心技术深度解析:从“会用API“到“懂原理、能表达“
前端·javascript·vue.js
Asurplus1 小时前
【VUE】16、使用 wangEditor 富文本编辑器
vue.js·图片上传·wangeditor·富文本编辑器
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_52:(深入 XPathExpression 接口)
开发语言·前端·javascript·ui·html·音视频
UXbot2 小时前
AI 原型工具零设计基础操作指南与功能解析(2026)
前端·ui·产品经理·原型模式·web app
yuzhiboyouye2 小时前
VO一般java后端怎么转换成前端想要的数据
java·前端·状态模式
一 乐2 小时前
学院教学工作量统计|基于java+ vue学院教学工作量统计管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·学院教学工作量统计系统