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>

最近更新

  1. TCP协议是安全的吗?

    2024-06-13 10:10:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-13 10:10:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-13 10:10:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-13 10:10:04       20 阅读

热门阅读

  1. 【odoo】odoo模块目录结构说明

    2024-06-13 10:10:04       11 阅读
  2. Oracle数据库之加锁的方法(十六)

    2024-06-13 10:10:04       9 阅读
  3. Eclipse的下载和安装

    2024-06-13 10:10:04       9 阅读
  4. Perl语言入门学习

    2024-06-13 10:10:04       7 阅读
  5. 用winform开发一个笔记本电脑是否在充电的小工具

    2024-06-13 10:10:04       10 阅读
  6. Linux常用命令大全

    2024-06-13 10:10:04       7 阅读
  7. React常见面试题(2024最新版)

    2024-06-13 10:10:04       9 阅读