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
        }
},
相关推荐
xvmingjiang10 分钟前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭10 分钟前
ES5 和 ES6 类的实现
前端·javascript·es6
excel11 分钟前
Three.js 实现高分辨率地球边界可视化
前端
LaoZhangAI25 分钟前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
用户114818678948429 分钟前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI30 分钟前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
用户114818678948434 分钟前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人35 分钟前
Pinia状态管理有哪些常用API?
前端
小高00736 分钟前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试
却尘39 分钟前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js