react antd 实现修改密码（原密码，新密码，再次输入新密码，新密码增加正则复杂度校验）

六卿

已于 2024-04-12 13:40:52 修改

阅读量313

点赞数 3

分类专栏： # react 前端文章标签： react.js 前端前端框架 react

于 2024-04-12 11:38:09 首次发布

本文链接：https://blog.csdn.net/qq_43291759/article/details/137674666

版权

react 同时被 2 个专栏收录

48 篇文章 3 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

先看样子

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

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