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

原文来源

相关推荐
小李小李不讲道理4 分钟前
「Ant Design 组件库探索」二:Tag组件
前端·react.js·ant design
1024小神8 分钟前
在rust中执行命令行输出中文乱码解决办法
前端·javascript
wordbaby9 分钟前
React Router v7 中的 `Layout` 组件工作原理
前端·react.js
旺仔牛仔QQ糖9 分钟前
Vue为普通函数添加防抖功能(基于Pinia 插件为action 配置防抖功能 引发思考)
前端·vue.js
lyc23333314 分钟前
鸿蒙Next人脸比对技术:轻量化模型的智能应用
前端
*小雪20 分钟前
vue2使用vue-cli脚手架搭建打包加密方法-JavaScript obfuscator
前端·javascript·vue.js
Coca34 分钟前
Vue 3 缩放盒子组件 ScaleBox:实现内容动态缩放与坐标拾取偏移矫正
前端
枫叶kx35 分钟前
发布一个angular的npm包(包含多个模块)
前端·npm·angular.js
工呈士36 分钟前
Webpack 剖析与策略
前端·面试·webpack
lyc23333337 分钟前
鸿蒙Next智能家居:轻量化模型的场景化落地
前端