如何清除触发的el-form中rules的规则验证_el-form rules trigger-优快云博客

本文链接：https://blog.youkuaiyun.com/zx11_11/article/details/124966593

本文介绍使用 Element UI 的表单组件实现承运企业信息录入的功能。重点讲解了如何通过自定义方法触发验证规则，并在特定条件下清除验证状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form v-show="isShow" ref="ruleForm" :model="addForm" :rules="rules" label-width="110px" :inline="true">
   <el-form-item v-show="type !== 6" label="承运企业：" prop="name">
       <el-input v-model="addForm.name"placeholder="请输入承运企业"></el-input>
   </el-form-item>
   <el-form-item label="领取时间：" prop="date">
       <el-date-picker v-model="addForm.date" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择领取时间"></el-date-picker>
   </el-form-item>
   <el-form-item label="快递领取人：" prop="peopleName">
       <div @click="userChange()">{{addForm.peopleName || '请选择快递领取人'}}</div>
   </el-form-item>
</el-form>

以上el-form对应的rules

rules:{
   name:[{required: true, message: "请输入承运企业", trigger: 'blur'}],
   date:[{required: true, message: "选择领取时间", trigger: 'change'}],
   peopleName:[{required: true, message: "请选择快递领取人"}],
},

提交时，第一个name和第二date都能在提交时消除rules的规则验证，但是第三个peopleName是自己写的方法，可以触发规则验证，但是不能在有数据的情况下消除验证。这时就要增加判断清除验证。

if(this.addForm.peopleName !== ''){
this.$refs['ruleForm'].clearValidate('peopleName');
}

完整代码如下：

submit(formName){
  this.disabledType = true;
  this.loading = true;
  this.$refs[formName].validate((valid) => {
     if(this.addForm.peopleName !== ''){
        this.$refs['ruleForm'].clearValidate('peopleName');
     }
     if(!valid){
        this.loading = false;
        this.disabledType = false;
        return
     }
  })
},