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

原文来源

相关推荐
前端九哥12 分钟前
装个依赖把公司电脑干报废了?npm i 到底背着我干了啥?
前端·javascript
溪海莘19 分钟前
React入门:跟读官方快速入门教程(前端小白)
前端·react.js·前端框架
绝世唐门三哥38 分钟前
工具函数-精准判断美东交易时间
前端·javascript·vue.js
Moment42 分钟前
如何一次性生成 60 种语气表达?RWKV 模型告诉你答案 ❗❗❗
前端·后端·aigc
踢球的打工仔1 小时前
typescript-null和undefined
前端·javascript·typescript
前端小蜗1 小时前
对不起,我很贱:老板还没催,我自己就统计《GitLab年度代码报告》
前端·javascript·人工智能
佛系打工仔1 小时前
绘制K线第三章:拖拽功能实现
android·前端·ios
cauyyl1 小时前
react 项目检查国际化配置脚本
前端·react.js·前端框架
康一夏1 小时前
React面试题,useRef和普通变量的区别
前端·javascript·react.js
前端 贾公子1 小时前
Monorepo + Turbo (6)
前端