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
        }
},
相关推荐
han_5 小时前
JavaScript设计模式(十):模板方法模式实现与应用
前端·javascript·设计模式
得物技术5 小时前
立正请站好:一个组件复用 Skill 的工程化实践|得物技术
前端·架构·ai编程
攀登的牵牛花5 小时前
OpenClaw 的内心独白,关于最近很火的Harness?
前端·openai
浩星5 小时前
electron系列8之Electron + Vue 3:构建现代化桌面应用(下)
前端·vue.js·electron
西西学代码5 小时前
查找设备页面(amap_map)
开发语言·前端·javascript
浩星5 小时前
electron系列7之Electron + Vue 3:构建现代化桌面应用(上)
javascript·vue.js·electron
m0_738120725 小时前
渗透测试基础ctfshow——Web应用安全与防护(四)
前端·安全·web安全·网络安全·flask·弱口令爆破
似水流年QC5 小时前
Chrome Performance 面板前端性能分析从入门到实战
前端·chrome
君穆南5 小时前
docker里面的minio的备份方法
前端
Thomas21435 小时前
--remote-debugging-port=9222 和 chrome://inspect/#remote-debugging 区别
前端·chrome