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
        }
},
相关推荐
MiyueFE9 分钟前
Nuxt 4.0 深度解析:从架构革新到实战迁移 🚀
前端·nuxt.js
天天向上的鹿茸11 分钟前
web前端用MVP模式搭建项目
前端·javascript·设计模式
wocwin1 小时前
uniapp微信小程序vue3封装时间段范围选择组件
vue.js·微信小程序
暖木生晖1 小时前
动画序列——实现一个div转一圈的效果
前端·css·html·css3·html5
山河木马1 小时前
前端学C++可太简单了:导入标准库
前端·javascript·c++
Hilaku1 小时前
你不会使用css函数 clamp()?那你太low了😀
前端·css·html
三小河1 小时前
解决小项目中的频繁部署-适用于没有Jenkins或者没有配置流水线的前端部署
前端
胡gh1 小时前
线程与进程:从零开始理解它们的区别与联系
前端·javascript·后端
OEC小胖胖1 小时前
React Native 在 Web 前端跨平台开发中的优势与实践
前端·react native·react.js·前端框架·web