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
        }
},
相关推荐
横冲直撞de28 分钟前
前端接收后端19位数字参数,精度丢失的问题
前端
我是哈哈hh29 分钟前
【JavaScript进阶】作用域&解构&箭头函数
开发语言·前端·javascript·html
摸鱼大侠想挣钱30 分钟前
ActiveX控件
前端
谢尔登32 分钟前
Vue 和 React 响应式的区别
前端·vue.js·react.js
神明木佑34 分钟前
HTML 新手易犯的标签属性设置错误
前端·css·html
老友@36 分钟前
OnlyOffice:前端编辑器与后端API实现高效办公
前端·后端·websocket·编辑器·onlyoffice
bin915340 分钟前
DeepSeek 助力 Vue 开发:打造丝滑的缩略图列表(Thumbnail List)
前端·javascript·vue.js·ecmascript·deepseek
格式化小拓1 小时前
v-for的使用,遍历数组、对象、数字、字符串等类型
vue.js
鑫~阳1 小时前
Vue2是如何利用Object.defineProperty实现数据的双向绑定?
前端·vue.js·vue
寰宇软件1 小时前
PHP房屋出租出售高效预约系统小程序源码
前端·小程序·uni-app·vue·php