#808·cube-ui

只设置自定义表单验证规则时,校验不触发

Author: pisces22745Created Nov 4, 2022Updated Nov 4, 2022

Version

1.12.38

Reproduction link

https://m-qa.gongmall.com/signature/verification?subMerchantId=3PGOJP&templateId=VODd3P&data=ZsFM79bD2azeFQWQGGzbyNnfcOvGzW%2Bl1BGrDJ4iLJA%3D&channel=1

Steps to reproduce

打开页面后直接点击提交按钮即可

What is expected?

银行卡号与支付宝号只需要收集一项,当两项都不填写时应触发自定义校验

What is actually happening?

银行卡号与支付宝号都不填写时没有触发自定义校验

Dependencies Version

vue: 2.7.13 better-scroll: 2.4.2


template:
        <cube-form-item
          style="position: relative" v-if="form.needCollectAccount===1||form.needCollectAccount===3"
          :field="fields.bankNum"
        >
          <div class="common-flex">
            <span class="cube-input-prepend">储蓄卡号</span>
            <div class="flex-auto">
              <cube-input
                ref="card-input"
                v-model="form.bankNum"
                :placeholder="fields.bankNum.props.placeholder"
                type="tel"
                :maxlength="28"
                :clearable="{visible: true, blurHidden: false}"
              >
              </cube-input>
              <p class="bank-name font-size-12 info-text">{{
                  form.bankName
                }}</p>
            </div>
          </div>
        </cube-form-item>

js定义: 
bankNum: {
          type: 'input',
          modelKey: 'bankNum',
          label: '',
          props: {
            placeholder: '请输入您的储蓄卡号'
          },
          rules: {
            required: false,
            checkBankNum1: (val) => {
              if (this.form.needCollectAccount === 1) {
                return Boolean(val)
              }
              return true
            },
            checkBankNum2: () => {
              const { needCollectAccount, bankNum, alipayNum } = this.form
              if (needCollectAccount === 3) {
                return !(!bankNum && !alipayNum)
              } else {
                return true
              }
            }
          },
          messages: {
            required: '请输入',
            checkBankNum1: '请输入您的储蓄卡号',
            checkBankNum2: '银行卡和支付宝必填一个'
          },
          // validating when blur
          trigger: 'blur'
        },
        alipayNum: {
          type: 'input',
          modelKey: 'alipayNum',
          label: '',
          props: {
            placeholder: '请输入您的支付宝账号'
          },
          rules: {
            required: false,
            check1: (val) => {
              if (this.form.needCollectAccount === 2) {
                return Boolean(val)
              }
              return true
            },
            check2: () => {
              const { needCollectAccount, bankNum, alipayNum } = this.form
              if (needCollectAccount === 3) {
                return !(!bankNum && !alipayNum)
              } else {
                return true
              }
            }
          },
          messages: {
            required: '请输入',
            check1: '请输入您的储蓄卡号',
            check2: '银行卡和支付宝必填一个'
          },
          // validating when blur
          trigger: 'blur'
        }