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
        }
},
相关推荐
计算机学姐8 分钟前
基于SpringBoot的民宿预定管理系统【三角色+个性化推荐算法+数据可视化统计】
java·vue.js·spring boot·mysql·信息可视化·intellij-idea·推荐算法
会编程的土豆30 分钟前
新手前端小细节
前端·css·html·项目
广州华水科技1 小时前
单北斗GNSS在桥梁形变监测中的应用与技术进展分析
前端
我讲个笑话你可别哭啊1 小时前
鸿蒙ArkTS快速入门
前端·ts·arkts·鸿蒙·方舟开发框架
CherryLee_12101 小时前
基于poplar-annotation前端插件封装文本标注组件及使用
前端·文本标注
特立独行的猫a1 小时前
C++轻量级Web框架介绍与对比:Crow与httplib
开发语言·前端·c++·crow·httplib
周航宇JoeZhou1 小时前
JB2-7-HTML
java·前端·容器·html·h5·标签·表单
代码小库1 小时前
【课程作业必备】Web开发技术HTML静态网站模板 - 校园动漫社团主题完整源码
前端·html
珹洺1 小时前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu1 小时前
VS Code HTML CSS Support 插件详解
前端·css·html