React的form表单自定义校验规则

        使用antd开发的过程中,必定会遇到需要对form表单进行必填校验的处理,正常情况下,我们都会一个空的必填校验,如下:一般我们只需要简单配置rules即可

<FormItem label="管理员姓名" {...itemLayout.wholeLine}>{getFieldDecorator('adminName', {initialValue: '',rules: [{ required: true, message: '请输入管理员姓名' },],})(<AInput placeholder="请输入管理员姓名" maxLength={30} />)}
</FormItem>

        遇到一些情况是:输入框有多个校验规则,比如说一个邮箱输入框

我们既需要:1、不为空;2、也需要邮箱格式正确;3、还需要与其他邮箱的后缀保持一致;

         这个时候我们可能需要用到自定义的校验规则:validator配置自定义校验规则

<FormItem label="管理员邮箱" {...itemLayout.wholeLine}>{getFieldDecorator('adminEmail', {initialValue: '',rules: [{required: true,whitespace: true,validator: this.adminEmailVerification,}],})(<AInput placeholder="请输入管理员邮箱" maxLength={30}/>)}
</FormItem>// 校验方法
adminEmailVerification = (rule, value, callback)=>{if(!value){callback(new Error('请输入管理员邮箱'));return} else{const emailRegex = /^([^@\u4e00-\u9fa5]+)@([^@\\.\u4e00-\u9fa5]+)(\.[^\\.@\u4e00-\u9fa5]+)+$/;  if(!emailRegex.test(value)){callback(new Error('邮箱格式错误'));return} else{callback()this.emailSuffixVerification()}}callback()return
}emailSuffixVerification = ()=>{const {form} = this.propslet collaboratorEmail = form.getFieldValue('collaboratorEmail');let adminEmail = form.getFieldValue('adminEmail');let [, suffix1] = (collaboratorEmail || '').split('@');  let [, suffix2] = (adminEmail || '').split('@'); if(suffix1 && suffix2 && (suffix1 != suffix2)){this.props.form.setFields({adminEmail: {value: adminEmail, errors: [new Error('邮箱后缀请与业务伙伴官邮后缀保持一致')] }})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

银行数仓项目实战(二)--数据采集(Kettle的抽取(E)转换(T)加载(L))

Kettle安装 Kettle又名PDI 要求电脑中有Java环境。 下载Kettle9.0的安装包&#xff0c;如有需要可以联系up私发噢。 注意&#xff01;&#xff01;&#xff01; 解压路径不能有中文&#xff0c;空格 解压后双击spoon.bat即可使用 链接数据库需要相应的驱动&#xff0c;Oracle的…

Python图像处理库之pyvips使用详解

概要 在图像处理领域,高效和快速的图像处理工具对于开发者来说至关重要。pyvips 是一个强大的 Python 库,基于 libvips 图像处理库,提供高效、快速且节省内存的图像处理能力。pyvips 支持多种图像格式,并且能够执行各种复杂的图像处理任务,如裁剪、缩放、旋转、滤波等。本…

采用了宽电压设计的测径仪为什么仍旧需要到现场勘察电力环境

关键字: 测径仪宽电压设计,测径仪电压范围,电压影响测径仪,测径仪车间电压 设备宽电压设计是指该设备能够在一定范围的电压波动内正常工作&#xff0c;而不会因为电压的轻微变化而导致性能下降或损坏。宽电压设计通常涉及到电源电路的优化和设计&#xff0c;以确保设备在电压波…

【C语言习题】31.冒泡排序

文章目录 作业标题作业内容2.解题思路3.具体代码 作业标题 冒泡排序 作业内容 实现一个对整形数组的冒泡排序 2.解题思路 先了解一下冒泡排序&#xff1a; 两两相邻的元素进行比较&#xff0c;如果前面元素大于后面元素就交换两个元素的位置&#xff0c;最终的结果是最大的…

代码随想录刷题经历

最近要着手于准备秋招了&#xff0c;之前都是零零散散的刷题&#xff0c;并且刷过就忘&#xff0c;于是乎准备用这篇博客记录刷题的经历和思想。 1、数组 2、链表 3、哈希表 4、字符串 5、双指针 6、栈与队列 7、二叉树 8、回溯算法 9、贪心算法 10、动态规划 11、单…

在浏览器中,设置小于1px的边框可能会被渲染为1px。这是由于浏览器的渲染引擎对小于1px的值处理不一致

为了实现小于1px的视觉效果&#xff0c;你可以使用一下几种方法 方法一&#xff1a;使用 CSS 的 transform 属性来缩放边框 你可以先设置一个1px的边框&#xff0c;然后使用 transform: scale() 来缩小它。 .element { border: 1px solid black; transform: scale(0.5); tran…

基于格网拓扑关系的边缘点检测

1、背景介绍 前文已介绍对点云进行格网处理,可以计算平面点云面积、格网拓扑关系构建,相关博客如下: (1)点云格网过程可视化(C++ PCL)-CSDN博客 (2)

使用 Web Serial API 在浏览器中实现串口通讯(纯前端)

文章目录 目的相关资料使用说明代码与演示总结 目的 串口是非常常用的一种电脑与设备交互的接口。目前在浏览器上直接使用电脑上的串口设备了&#xff0c;这篇文章将介绍相关内容。 相关资料 Web Serial API 相关内容参考如下&#xff1a; https://developer.mozilla.org/en…

无人机技术的原理和发展

无人机技术的原理 无人机技术的原理主要涵盖三个核心方面&#xff1a;空气动力学原理、机械原理和电子原理。 空气动力学原理&#xff1a;无人机能够飞行的基础。无人机通过四个主要力——升力、重力、推力和阻力来实现飞行和稳定。升力是使飞机上升的力&#xff0c;由机翼形…

汇编语言实验四 分支与循环结构程序设计

1&#xff0e;已定义四位年份&#xff0c;判断是否是闰年&#xff0c;是则输出y&#xff0c;不是输出n。 .model small,c .stack 200h .data res db ? year dw 2000h mod4 dw ? mod100 dw ? mod400 dw ? ;这些类型的余数必须是dw和year类型匹配 .code .startup mov dx,0 m…

消息队列-分布式消息队列技术选型

Kafka Kafka 是 LinkedIn 开源的一个分布式流式处理平台&#xff0c;已经成为 Apache 顶级项目&#xff0c;早期被用来用于处理海量的日志&#xff0c;后面才慢慢发展成了一款功能全面的高性能消息队列。 流式处理平台具有三个关键功能&#xff1a; 消息队列&#xff1a;发布和…

C#——文件读取IO操作File类详情

文件读取操作 IO类 就是对应文件的操作的类I/O类 包含各种不同的类 用于执行各种文件操作&#xff0c;创建文件删除文件读写文件 常用的类: File处理文件操作的类 FilleStream用于文件当中任何位置的读写 File类 1.文件创建 File.Create() 在指定路径下创建…

智慧校园综合解决方案:提供全方位的学校管理支持

在当今数字化时代&#xff0c;学校管理面临着越来越多的挑战&#xff0c;包括学生管理、教职员工管理、校园安全等。为了应对这些挑战&#xff0c;智慧校园综合解决方案应运而生。智慧校园综合解决方案融入了先进的信息技术&#xff0c;为学校带来了一场管理与教育模式的革新。…

12寸晶圆厂AGV和天车对网络建设的一些要点

12寸晶圆厂往往有AGV&#xff08;自动导引车&#xff09;和天车作为自动化设备&#xff0c;对网络有特定的参数指标要求&#xff0c;以确保它们的稳定运行和高效通信。以下是一些关键的网络参数指标要求&#xff1a; 1、 对于AGV的网络参数指标要求&#xff1a; 1. 通信协议支…

函数式组件:函数式组件是无状态的,它们不会被实例化,整个渲染过程被简化。我们可以讨论何时使用函数式组件以及如何使用

函数式组件的定义和特点 函数式组件是 Vue.js 提供的一种轻量级、简单、无状态的组件形式。它们被称为"函数式"的原因就在于它们只是一个纯函数,根据输入(属性)返回一个渲染的节点 Tree。 无状态 无状态是指函数式组件没有自己的状态,或者说没有自己的响应式…

给循环里的属性前三个加不同的样式

<template><view class"search-hot"><view class"search-hot-title" v-show"hotWord.length > 0">热词</view><view class"search-hot-list"><viewclass"search-hot-list-item"v-for&q…

打印mybatis的sql日志

1、application.xml: logging.level.com.xxx.xxx.daodebug2、log4j2.xml: <Logger name"com.xxx.xxx.dao" level"debug" additivity"true" />

SAP ABAP开发:如何读取物料主数据中的长文本?

在SAP ERP系统中&#xff0c;物料的基本描述可存储40个字符&#xff0c;见下图&#xff1a; 但长文本信息如何从系统中读取呢&#xff1f; 在SAP ABAP开发中&#xff0c;读取物料主数据&#xff08;Material Master Data&#xff09;中的基本视图&#xff08;Basic View&#…

DLS平台:惠誉全球经济展望——今年调增至2.6%,明年调减!

摘要 尽管全球货币政策逐渐转向宽松&#xff0c;惠誉国际评级&#xff08;Fitch Ratings&#xff09;在最新的《全球经济展望》中对2024年全球经济增长进行了上调。然而&#xff0c;由于美国经济增速放缓和其他因素的影响&#xff0c;2025年的全球经济增长预期则被下调。这篇文…

保姆级小白就业人工智能(视频+源码+笔记)

&#x1f345;我是小宋&#xff0c; Java学习AI&#xff0c;记录学习之旅。关注我&#xff0c;带你轻松过面试。提升简历亮点&#xff08;14个demo&#xff09; &#x1f345;我的java面试合集已有12W 浏览量。&#x1f30f;号&#xff1a;tutou123com。拉你进专属群。 ⭐⭐你的…