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>))
}