根据你的需求,我为你编写了一段代码实现:
const checkRequired = (data) => {
return (value, fields) => {
if (isEmpty(fields['extension']) || isEmpty(fields['maxExtenPeriods']) || isEmpty(fields['repayChannel'])) {
return '都要填写';
}
};
};
const checkoutLegalPerson = (field) => {
return (value) => {
if (!value) {
return `${field}不能为空`;
}
};
};
const validator = createValidator({
extension: [(value, fields) => {
if (fields.extension === true && isEmpty(value)) {
return '最长展期期数';
}
if (!fields.extension === true) {
return;
}
}],
maxExtenPeriods: [checkoutLegalPerson('maxExtenPeriods')],
repayChannel: [
(value, fields) => {
if ((fields.repayChannel && fields.repayChannel.offline === true)
|| (fields.repayChannel && fields.repayChannel.active === true)
|| (fields.repayChannel && fields.repayChannel.withhold === true))
{
return;
} else {
return '还款渠道至少选择一种';
}
}
],
});
在上面的代码中,checkRequired
函数用于检查是否有必填字段未填写;checkoutLegalPerson
函数用于验证某个字段是否为空;validator
对象是一个包含各个字段的验证规则的对象。
接下来是对应线上值和输入框元素的代码部分,请将下列代码添加到合适位置:
<InputGroup field={repayChannel} label="还款渠道" sm={3} lsm={3} size="sm">
<div className="col-sm-9">
<div className="col-sm-4">
<div className="checkbox">
<label>
<input
type="checkbox"
name="channelType"
checked={repayChannel.value === 'offline'}
onChange={() => { repayChannel.onChange({ offline: true }) }}
/> 线下
</label>
</div>
</div>
<div className="col-sm-4">
<div className="checkbox">
<label>
<input
type="checkbox"
name="channelType"
checked={repayChannel.value === 'active'}
onChange={() => { repayChannel.onChange({ active: true }) }}
/> 主动
</label>
</div>
</div>
<div className="col-sm-4">
<div className="checkbox">
<label>
<input
type="checkbox"
name="channelType"
checked={repayChannel.value === 'withhold'}
onChange={() => { repayChannel.onChange({ withhold: true }) }}
/> 代扣
</label>
</div>
</div>
</div>
</InputGroup>
这段代码会根据选中的复选框改变 repayChannel
字段的值,选中其中一个复选框时对应字段为 true
,未选中则为 false
。
希望以上代码能满足你的需求。如有其他问题,请随时提问。
内容由零声教学AI助手提供,问题来源于学员提问