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",
          },
        ],
      }}

原文来源

相关推荐
swipe29 分钟前
为什么 RAG 一定离不开向量检索:从文档向量化到语义搜索的工程实现
前端·llm·agent
OpenTiny社区1 小时前
AI-Extension:让 AI 真的「看得到、动得了」你的浏览器
前端·ai编程·mcp
IT_陈寒1 小时前
Redis缓存击穿:3个鲜为人知的防御策略,90%开发者都忽略了!
前端·人工智能·后端
竹林8182 小时前
在Web3前端用Node.js子进程批量校验钱包,我踩了这些性能与安全的坑
javascript·node.js
农夫山泉不太甜2 小时前
Tauri v2 实战代码示例
前端
yuhaiqiang2 小时前
被 AI 忽悠后,开始怀念搜索引擎了?
前端·后端·面试
红色石头本尊3 小时前
1-umi-前端工程化搭建
前端
真夜3 小时前
关于对echart盒子设置百分比读取的宽高没有撑开盒子解决方案
前端
楠木6853 小时前
RAG 资料库 Demo 完整开发流程
前端·ai编程
肠胃炎3 小时前
挂载方式部署项目
服务器·前端·nginx