VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示

上代码

html 复制代码
<el-form-item label="出库单号" prop="ecode" ref="ecode" :rules="rules.ecode">
                <el-input v-model="queryParams.ecode" placeholder="出库单号和出库箱号至少填写一项" clearable style="width: 300px" />
              </el-form-item>
              <el-form-item label="出库箱号" prop="econtainerCode" ref="econtainerCode" :rules="rules.econtainerCode">
                <el-input v-model="queryParams.econtainerCode" placeholder="出库单号和出库箱号至少填写一项" clearable style="width: 300px"  />
              </el-form-item>
js 复制代码
data() {
    var validateName = (rule, value, callback) => {
      if (!this.queryParams.ecode && !this.queryParams.econtainerCode) {
        callback(new Error("请至少填写一项"))
      } else {
        //任意值被填写,清除验证提示
        if (!this.queryParams.ecode || !this.queryParams.econtainerCode) {
          // this.$nextTick(() => {
          //   this.$refs.zhname.clearValidate()
          // })
          this.$refs.ecode.clearValidate()
          this.$refs.econtainerCode.clearValidate()
        }
        callback()
      }
    }

    return {
      rules: {
        ecode: [
          {
            required: true,
            validator: validateName,
            trigger: "change",
          },
        ],
        econtainerCode: [
          {
            required: true,
            validator: validateName,
            trigger: "change",
          },
        ],
      }}

原文来源

相关推荐
IT_陈寒几秒前
Spring Boot 3.2震撼发布:5个必知的新特性让你开发效率提升50%
前端·人工智能·后端
San30.3 分钟前
JavaScript 深度解析:从 map 陷阱到字符串奥秘
开发语言·javascript·ecmascript
初遇你时动了情6 分钟前
前端使用TensorFlow.js reactjs调用本地模型 实现图像、文本、音频/声音、视频相关识别
前端·javascript·tensorflow
广州华水科技12 分钟前
单北斗GNSS变形监测系统安装与应用解析,提升位移监测精度
前端
J***Q29215 分钟前
前端微前端框架原理,qiankun源码分析
前端·前端框架
十一.36615 分钟前
66-69 原型对象,toString(),垃圾回收
开发语言·javascript·原型模式
菜鸟‍16 分钟前
【前端学习】React学习【万字总结】
前端·学习·react.js
百***844522 分钟前
Webpack、Vite区别知多少?
前端·webpack·node.js
Mintopia27 分钟前
零信任架构下的 WebAIGC 服务安全技术升级方向
前端·人工智能·trae
敏姐的后花园2 小时前
模考倒计时网页版
java·服务器·前端