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
        }
},
相关推荐
一只小阿乐6 小时前
react路由中使用context
前端·javascript·react.js·context 上下文
Hilaku6 小时前
一周狂揽40K+ Star⭐ 的 Pretext 到底有多变态?
前端·javascript·html
533_6 小时前
适用于vue3的拖拽插件:vue-draggable-plus, vuedraggable@next
javascript·vue.js
Southern Wind6 小时前
AI Skill Server 动态技能中台
前端·后端·mysql·node.js
锦木烁光6 小时前
多端项目太乱?我是这样用 Monorepo 重构的
前端·架构
上山打牛6 小时前
cornerstone3D基本使用
前端
阿鑫_9966 小时前
通用-Nvm基础知识
前端
xinzheng新政6 小时前
Javascript·深入学习基础知识
前端·javascript·学习
前端付豪6 小时前
实现记忆开关
前端·后端
前端开发呀6 小时前
约定式路由的极简主义实践:一个插件搞定 React/Vue × Vite/Rspack
前端