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

2024-06-12 21:20

本文主要是介绍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) // 检查是否有至少一个为trueif (!isSelected) {// 如果没有选中任何一项,则返回错误信息return Promise.reject(new Error('请选择至少一个备份周期'))}return Promise.resolve()}<Form.Itemcolon={false}label={t('backupsTOP9')}className='time'name='week'rules={[{validator: validateAtLeastOneCheckbox,message: '请选择备份周期'}]}><div className='' style={{ width: 1100 }}><Checkboxchecked={isChecked1}onChange={e => {setIsChecked1(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP10')}</Checkbox><Checkboxchecked={isChecked2}onChange={e => {setIsChecked2(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP11')}</Checkbox><Checkboxchecked={isChecked3}onChange={e => {setIsChecked3(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP12')}</Checkbox><Checkboxchecked={isChecked4}onChange={e => {setIsChecked4(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP13')}</Checkbox><Checkboxchecked={isChecked5}onChange={e => {setIsChecked5(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP14')}</Checkbox><Checkboxchecked={isChecked6}onChange={e => {setIsChecked6(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP15')}</Checkbox><Checkboxchecked={isChecked7}onChange={e => {setIsChecked7(e.target.checked)}}style={{ marginLeft: 60, fontSize: 16, width: 80 }}>{t('backupsTOP16')}</Checkbox></div></Form.Item>

这篇关于checkbox表单校验 至少选中一个Checkbox , 否则会报错的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1055367

相关文章

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

Jenkins 插件 地址证书报错问题解决思路

问题提示摘要: SunCertPathBuilderException: unable to find valid certification path to requested target...... 网上很多的解决方式是更新站点的地址,我这里修改了一个日本的地址(清华镜像也好),其实发现是解决不了上述的报错问题的,其实,最终拉去插件的时候,会提示证书的问题,几经周折找到了其中一遍博文

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from 'vue';import App from './App.vue';import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上Vue.prototype.$downloadTokenF

【Python报错已解决】AttributeError: ‘list‘ object has no attribute ‘text‘

🎬 鸽芷咕:个人主页  🔥 个人专栏: 《C++干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 文章目录 前言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一:检查属性名2.2 步骤二:访问列表元素的属性 三、其他解决方法四、总结 前言 在Python编程中,属性错误(At

DBeaver 连接 MySQL 报错 Public Key Retrieval is not allowed

DBeaver 连接 MySQL 报错 Public Key Retrieval is not allowed 文章目录 DBeaver 连接 MySQL 报错 Public Key Retrieval is not allowed问题解决办法 问题 使用 DBeaver 连接 MySQL 数据库的时候, 一直报错下面的错误 Public Key Retrieval is

校验码:奇偶校验,CRC循环冗余校验,海明校验码

文章目录 奇偶校验码CRC循环冗余校验码海明校验码 奇偶校验码 码距:任何一种编码都由许多码字构成,任意两个码字之间最少变化的二进制位数就称为数据检验码的码距。 奇偶校验码的编码方法是:由若干位有效信息(如一个字节),再加上一个二进制位(校验位)组成校验码。 奇校验:整个校验码中1的个数为奇数 偶校验:整个校验码中1的个数为偶数 奇偶校验,可检测1位(奇数位)的错误,不可纠错。

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面,引入了一个子组件,在父组件中调用子组件的方法时,报错提示: [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods

react笔记 8-21 约束性 表单

1、约束性组件和非约束性组件 非约束性组件<input type="text" name="" defaultValue={this.state.msg}></input>这里他的value是用户输入的值 并没有执行操作 只是获取到了msg的值 用户输入不会改变数据非约束性组件需要使用defaultValue获取数据 否则会报错约束性组件<input type="text