Skip to content

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

Open
@pisces22745

Description

@pisces22745

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'
        }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions