ZBLOG

//校验搜索条件一个必填 const trimLeft = function trimLeft(s) { return s.replace(/(^\s*)/g, ''); }; const isEmpty = function isEmpty(value) { return value === undefined || value === null || trimLeft(value) === ''; }; const checkRequired = (data) => {

根据你的需求,我为你编写了一段代码实现:

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助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=9983

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?