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
        }
},
相关推荐
用户59625857360612 分钟前
戴上AI眼镜逛花市——感受不一样的体验
前端
yuki_uix16 分钟前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
老板我改不动了17 分钟前
前端面试复习指南【代码演示多多版】之——HTML
前端
panshihao19 分钟前
Mac 环境下通过 SSH 操作服务器,完成前端静态资源备份与更新(全程实操无坑)
前端
hulkie44 分钟前
从 AI 对话应用理解 SSE 流式传输:一项 "老技术" 的新生
前端·人工智能
dobym1 小时前
里程碑五:Elpis框架npm包抽象封装并发布
前端
全栈老石1 小时前
手写无限画布4 —— 从视觉图元到元数据对象
前端·javascript·canvas
牛奶1 小时前
React 底层原理 & 新特性
前端·react.js·面试
用户11489669441051 小时前
VUE3响应式原理——从零解析
vue.js
parade岁月1 小时前
Tailwind CSS v4 — 当框架猜不透你的心思
前端·css