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
        }
},
相关推荐
王霸天3 小时前
💥大屏卡成 PPT?这 3 个性能优化招数亲测有效
前端·vue.js·数据可视化
ahhdfjfdf3 小时前
微信H5 页面定位权限处理
前端·javascript
蓝黑20203 小时前
Vue组件通信之emit
前端·javascript·vue
kyriewen3 小时前
线上Bug炸了,用户骂你你却不知道?前端监控教你“远程开天眼”
前端·javascript·监控
网络点点滴3 小时前
创建一个简单的web服务器
运维·服务器·前端
XPoet4 小时前
AI 编程工程化:MCP——给你的 AI 员工打通外部能力
前端·后端·ai编程
笨笨狗吞噬者4 小时前
小程序包体积分析利器 -- vite-plugin-component-insight
前端·微信小程序·uni-app
吴声子夜歌4 小时前
Vue3——v-for指令
前端·javascript·vue
你的牧游哥4 小时前
Cursor IDE Rules / Skills / Subagents 前端项目配置全指南
前端·ide
音仔小瓜皮4 小时前
【Vue】什么时候用Ref?什么时候用shallowRef?
前端·javascript·vue.js