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
        }
},
相关推荐
C_心欲无痕7 分钟前
ts - 模板字面量类型与 `keyof` 的魔法组合:`keyof T & `on${string}`使用
linux·运维·开发语言·前端·ubuntu·typescript
一勺菠萝丶12 分钟前
Java 后端想学 Vue,又想写浏览器插件?
java·前端·vue.js
@PHARAOH17 分钟前
HOW - 如何禁用 localstorage
前端·状态模式
霍理迪17 分钟前
CSS布局方式——弹性盒子(flex)
前端·css
Irene199118 分钟前
Vue 3中:setup 函数接收两个重要参数:props 和 context(附:setup 中无法访问 this 详解)
vue.js·setup
念你那丝微笑24 分钟前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
内存不泄露27 分钟前
基于Spring Boot和Vue的宠物医院管理系统设计与实现
vue.js·spring boot·信息可视化
xkxnq36 分钟前
第一阶段:Vue 基础入门(第 14天)
前端·javascript·vue.js
前端小臻36 分钟前
列举react中类组件和函数组件常用到的方法
前端·javascript·react.js
筱歌儿42 分钟前
TinyMCE-----word表格本地图片转base64并上传
前端·word