checkbox表单校验 至少选中一个Checkbox , 否则会报错

项目背景 :  react + ant
需求 : 需实现至少选中一个Checkbox , 否则会报错
需求如下 : 


注意 : Input, Select, DatePicker可以直接处理Form.Item的验证规则 ,  但Checkbox不行 , 需自定义验证规则

实现 : 

 

  // 自定义的checkbox校验规则--星期
  const validateAtLeastOneCheckbox = (_, value) => {
    // 假设 isChecked1-7 是您在外部维护的state,反映了Checkbox的选中状态
    const isCheckedArray = [
      isChecked1,
      isChecked2,
      isChecked3,
      isChecked4,
      isChecked5,
      isChecked6,
      isChecked7
    ]
    const isSelected = isCheckedArray.some(Boolean) // 检查是否有至少一个为true

    if (!isSelected) {
      // 如果没有选中任何一项,则返回错误信息
      return Promise.reject(new Error('请选择至少一个备份周期'))
    }
    return Promise.resolve()
  }


<Form.Item
                  colon={false}
                  label={t('backupsTOP9')}
                  className='time'
                  name='week'
                  rules={[
                    {
                      validator: validateAtLeastOneCheckbox,
                      message: '请选择备份周期'
                    }
                  ]}
                >
                  <div className='' style={{ width: 1100 }}>
                    <Checkbox
                      checked={isChecked1}
                      onChange={e => {
                        setIsChecked1(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP10')}
                    </Checkbox>
                    <Checkbox
                      checked={isChecked2}
                      onChange={e => {
                        setIsChecked2(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP11')}
                    </Checkbox>
                    <Checkbox
                      checked={isChecked3}
                      onChange={e => {
                        setIsChecked3(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP12')}
                    </Checkbox>
                    <Checkbox
                      checked={isChecked4}
                      onChange={e => {
                        setIsChecked4(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP13')}
                    </Checkbox>
                    <Checkbox
                      checked={isChecked5}
                      onChange={e => {
                        setIsChecked5(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP14')}
                    </Checkbox>
                    <Checkbox
                      checked={isChecked6}
                      onChange={e => {
                        setIsChecked6(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP15')}
                    </Checkbox>
                    <Checkbox
                      checked={isChecked7}
                      onChange={e => {
                        setIsChecked7(e.target.checked)
                      }}
                      style={{ marginLeft: 60, fontSize: 16, width: 80 }}
                    >
                      {t('backupsTOP16')}
                    </Checkbox>
                  </div>
                </Form.Item>

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用el-checkbox-group进行表单校验时,可以使用element-ui提供的校验规则来实现。首先,需要在data中定义一个rules对象,用来存储校验规则。然后,在el-checkbox-group标签中添加prop属性,指定该字段在校验规则中的名称。接下来,可以在rules对象中添加相应的校验规则,例如required、min等。最后,在el-checkbox-group的父级el-form-item标签中,使用:rules属性绑定校验规则。这样,在提交表单时,就进行相应的校验,并给出相应的提示信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Element UI 表单【详解】-- 表单校验表单元素排列在一行,常用表单元素等](https://blog.csdn.net/weixin_41192489/article/details/114286502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [nested_el-checkbox:element-ui的el-checkbox实现嵌套多,单](https://download.csdn.net/download/weixin_42107561/18609162)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值