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

先看样子

组件代码:

javascript 复制代码
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.Item
                                        name="oldPassword"
                                        label="原密码:"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入原密码!',
                                            },
                                        ]}
                                    >
                                        <Input.Password
                                            size="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.Item
                                    name="newPassword"
                                    label="新密码:"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入新密码!',
                                        },
                                        {
                                            pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,20}/,
                                            message: '请输入8-20位数的密码,其中包含大小写字母、数字和特殊符号四种'
                                        },
                                    ]}
                                >
                                    <Input.Password
                                        size="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.Item
                                    name="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.Password
                                        size="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>
        )
    )
}
相关推荐
lecepin1 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
BumBle2 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
搞个锤子哟2 小时前
vant4的van-pull-refresh里的列表不在顶部时下拉也会触发刷新的问题
前端
jnpfsoft2 小时前
低代码视图真分页实操:API/SQL 接口配置 + 查询字段避坑,数据加载不卡顿
前端·低代码
HHHHHY2 小时前
使用阿里lowcode,封装SearchDropdown 搜索下拉组件
前端·react.js
前端付豪2 小时前
万事从 todolist 开始
前端·vue.js·前端框架
小胖霞2 小时前
从零开始:在阿里云 Ubuntu 服务器部署 Node+Express 接口(基于公司 GitLab)
前端·后端
A_Bin2 小时前
前端工程化之【包管理器】
前端
小肚肚肚肚肚哦2 小时前
CSS 伪类函数 :where 简介
前端·css
Nick56832 小时前
Swift -- 第三方登录之微信登录 源码分享
前端