react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)

先看样子

在这里插入图片描述
组件代码:

import React, { useState, useEffect } from 'react'
import { Row, Col, Modal, Spin, Input, Button, message, Form } from 'antd'
import { LockOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons'
import * as Serve from '@/serve/Serve/Serve'
// 添加弹窗
import { history } from 'umi'
export default function ({ modalViPassword, onCancelPassword, firstLoginFlag = false }) {const [form] = Form.useForm()// 修改密码const [loadingPassword, setloadingPassword] = useState(false)const iconRender = visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)const modalCancelPassword = () => {form.resetFields()setloadingPassword(false)}const goLoginFun = () => {IPServe.systemlLogout()const href = '/AAAA/mainlogin'history.push({pathname: href,})}const onOkPassword = async () => {form.validateFields().then(async values => {let { oldPassword, newPassword,  } = form.getFieldsValue()modalCancelPassword()})}return (modalViPassword && (<Modal visible={modalViPassword} footer={null} destroyOnClose closable={false} width={600} title={'密码修改'} onCancel={modalCancelPassword}><Spin spinning={loadingPassword}><Form initialValues={{}} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} form={form} autoComplete="off" colon={false}>{!firstLoginFlag && (<Row style={{ width: '88%', margin: '0px auto 10px', display: 'flex', alignItems: 'center' }}><Col span={24}><Form.Itemname="oldPassword"label="原密码:"rules={[{required: true,message: '请输入原密码!',},]}><Input.Passwordsize="large"placeholder="请输入原密码"prefix={<LockOutlined style={{ color: '#ec5e59' }} />}iconRender={iconRender}/></Form.Item></Col></Row>)}<Row style={{ width: '88%', margin: '0px auto 10px', display: 'flex', alignItems: 'center' }}><Col span={24}><Form.Itemname="newPassword"label="新密码:"rules={[{required: true,message: '请输入新密码!',},{pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,20}/,message: '请输入8-20位数的密码,其中包含大小写字母、数字和特殊符号四种'},]}><Input.Passwordsize="large"placeholder="请输入新密码"prefix={<LockOutlined style={{ color: '#ec5e59' }} />}iconRender={iconRender}/></Form.Item></Col></Row><Row style={{ width: '88%', margin: '0px auto 10px', display: 'flex', alignItems: 'center' }}><Col span={24}><Form.Itemname="newPassword2"label="复输新密码:"rules={[{required: true,message: '请再次输入新密码!',},{pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,20}/,message: '请输入8-20位数的密码,其中包含大小写字母、数字和特殊符号四种'},({ getFieldValue }) => ({validator(_, value) {if (!value ||(getFieldValue('newPassword') && getFieldValue('newPassword').trim()) === (value && value.trim())) {return Promise.resolve()}return Promise.reject(new Error('两次新密码请保持一致!'))},}),]}><Input.Passwordsize="large"placeholder="请再次输入新密码"prefix={<LockOutlined style={{ color: '#ec5e59' }} />}iconRender={iconRender}/></Form.Item></Col></Row></Form><Row justify="end" style={{ marginTop: '15px' }}><Button type="primary" style={{ marginRight: '15px' }} onClick={onOkPassword}>修改</Button><Button type="ghost" style={{ backgroundColor: '#fff' }} onClick={modalCancelPassword}>取消</Button></Row></Spin></Modal>))
}

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

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

相关文章

pyside6的QSpinBox自定义特性初步研究(二)

当前的需求是&#xff0c;蓝色背景的画面&#xff0c;需要一个相对应色系的QSpinBox部件。已有的部件风格是这样的&#xff0c;需要新的部件与之般配。 首先新建一个QDoubleSpinBox&#xff0c;并定义其背景色和边框&#xff1a; QDoubleSpinBox { color: white; border:1px…

基于无线物联网的智能配电监控系统设计应用

摘要&#xff1a;阐述基于电力物联网的智能配电监控系统的特点&#xff0c;探讨物联网结构及其关键技术&#xff0c;电力物联网下的智能配电监控系统设计&#xff0c;包括整体结构设计、硬件和软件系统设计。 安科瑞薛瑶瑶18701709087 关键词&#xff1a;电力物联网&#xff…

【好用】推荐10套后端管理系统前端模板

后台管理系统前端模板是开发者在构建后台管理系统时使用的一种工具&#xff0c;它提供了预先设计好的界面和组件&#xff0c;以帮助开发者快速搭建出功能完善、用户体验良好的管理系统。以下是V哥整理的10款流行的后台管理系统前端模板&#xff0c;它们基于不同的技术栈和设计理…

zookeeper分布式应用程序协调服务

一、zookeeper基本介绍 1.1 zookeeper的概念 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目。 是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、…

[Python图像识别] 五十二.水书图像识别 (2)基于机器学习的濒危水书古文字识别研究

该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门、OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子、图像增强技术、图像分割等,后期结合深度学习研究图像识别、图像分类应用。目前我进入第二阶段Python图像识别,该部分主要以目标检测、图像…

CVPR 2024 | Retrieval-Augmented Open-Vocabulary Object Detection

CVPR 2024 - Retrieval-Augmented Open-Vocabulary Object Detection 论文&#xff1a;https://arxiv.org/abs/2404.05687代码&#xff1a;https://github.com/mlvlab/RALF原始文档&#xff1a;https://github.com/lartpang/blog/issues/13 本文提出了一种新的开放词汇目标检…

Mybatis学习面试题

一、老杜Mybatis电子版讲义文档 MyBatis属于半⾃动化ORM框架。本质上就是对JDBC的封装&#xff0c;通过MyBatis完成CRUD。 MyBatis核⼼配置⽂件详解&#xff1b; MyBatis三⼤对象的作⽤域和⽣命周期&#xff1b; SqlSessionFactoryBuilder&#xff1a;读取核心配置文件&…

去除pycharm运行pytest的默认参数--no-header --no-summary -q

进入pycharm设置(Settings)&#xff0c;找到高级设置(Advanced Settings)—>Python–>Pytest&#xff1a;不添加"–no-header --no-summary -q"(Pytest&#xff1a;do not add “–no-header --no-summary -q”)

2024年妈妈杯数学建模C题思路分析-物流网络分拣中心货量预测及人员排班

# 1 赛题 C 题 物流网络分拣中心货量预测及人员排班 电商物流网络在订单履约中由多个环节组成&#xff0c;图 ’ 是一个简化的物流 网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包裹按照不同 流向进行分拣并发往下一个场地&#xff0c;最终使包裹…

Android中基于DWARF的stack unwind实现原理

一、简介 在软件开发中&#xff0c;unwind stack(栈回溯 或 调用栈展开)是调试和异常处理中至关重要的一环&#xff0c;通过理解其实现原理&#xff0c;可以更好地理解程序的执行流程&#xff0c;更有效地进行调试和错误排查。 本文主要介绍 AArch64 架构下的两种最典型的栈回溯…

RabbitMQ的介绍

为什么使用 MQ&#xff1f; 流量削峰和缓冲 如果订单系统最多能处理一万次订单&#xff0c;这个处理能力在足够应付正常时段的下单&#xff0c;但是在高峰期&#xff0c;可能会有两万次下单操作&#xff0c;订单系统只能处理一万次下单操作&#xff0c;剩下的一万次被阻塞。我们…

.NET JWT入坑

前言 JWT (JSON Web Token) 是一种安全传输信息的开放标准&#xff0c;由Header、Payload和Signature三部分组成。它主要用于身份验证、信息交换和授权。JWT可验证用户身份&#xff0c;确保访问权限&#xff0c;实现单点登录&#xff0c;并在客户端和服务器之间安全地交换信息…

计算机组成原理总结(笔记)

计算机组成原理总结 第一章 计算机系统概论 第二章 计算机的发展及应用 第三章 系统总线 第四章 存储器 第五章 输入输出系统 第六章 计算机的运算方法 第七章 指令系统 第八章 CPU 的结构与功能 第九章 控制单元的功能 第十章 控制单元的设计

SQLite 在Android安装与定制方案(十七)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite超详细的编译时选项&#xff08;十六&#xff09; 下一篇&#xff1a;SQLite Android 绑定&#xff08;十八&#xff09; 安装 有三种方法可以将 SQLite Android 绑定添加到应用程序&#xff1a; 1、通过…

探索Python库的奇妙世界

探索Python库的奇妙世界 Python作为一种流行的编程语言&#xff0c;因其简洁的语法、强大的库支持和广泛的应用场景而备受开发者青睐。在这篇文章中&#xff0c;我们将深入探讨Python库的世界&#xff0c;了解它们如何帮助我们更高效地编写代码&#xff0c;并展示一些最有用的…

C++的stack和queue类(三):适配所有容器的反向迭代器

目录 前言 list的反向迭代器 list.h文件 ReverseIterator.h文件 test.cpp文件 前言 迭代器按性质分类&#xff1a; 单向&#xff1a;forward_list双向&#xff1a;list随机&#xff1a;vector / deque 迭代器按功能分类&#xff1a; 正向反向const list的反向迭代器…

深入理解Apache ZooKeeper与Kafka的协同工作原理

目录 引言 一、ZooKeeper基础概念 &#xff08;一&#xff09;ZooKeeper简介 &#xff08;二&#xff09;ZooKeeper数据结构 &#xff08;三&#xff09;ZooKeeper特点 &#xff08;四&#xff09;应用场景 二、ZooKeeper工作模式 &#xff08;一&#xff09;工作机制 …

请求分发场景下的鉴权问题

说明&#xff1a;记录一次对请求分发&#xff0c;无法登录系统的问题。 场景 如下&#xff0c;在此结构下&#xff0c;如何判断该用户是已登录的用户&#xff1b; 常规操作&#xff0c;用户登录后给用户发Token&#xff0c;同时将发放的Token存入到Redis中。要求用户后续请求…

在 Vue 3 中使用 Axios 发送 POST 请求

在 Vue 3 中使用 Axios 发送 POST 请求需要首先安装 Axios&#xff0c;然后在 Vue 组件或 Vuex 中使用它。以下是一个简单的安装和使用案例&#xff1a; 安装 Axios 你可以使用 npm 或 yarn 来安装 Axios&#xff1a; npm install axios # 或者 yarn add axios 使用 Axios…

架构设计-订单系统之订单系统的架构进化

1、单数据库架构 产品初期&#xff0c;技术团队的核心目标是&#xff1a;“快速实现产品需求&#xff0c;尽早对外提供服务”。 彼时的专车服务都连同一个 SQLServer 数据库&#xff0c;服务层已经按照业务领域做了一定程度的拆分。 这种架构非常简单&#xff0c;团队可以分开…