Open
Description
Version
1.12.38
Reproduction link
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
Labels
No labels