登录界面用户密码限制输入

index.jsx文件

import React, { useState } from 'react';
import { Form, Input, Button, Checkbox, Popover } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import cx from 'classnames';
import './index.less';

const Login = () => {
  const [pass, setPass] = useState('');
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  const content = () => {
    return (
      <ul>
        <li>
          <span className={cx({ error: true, correct: /^[\s\S]{8,16}$/.test(pass) })}>
            密码长度为8-16位
          </span>
        </li>
        <li>
          <span className={cx({ error: true, correct: /^[\w@#\-.]{8,16}$/.test(pass) })}>
            密码由字母、数字、下划线、@ # - .组成
          </span>
        </li>
        <li>
          <span
            className={cx({
              error: true,
              correct: /^(?!\d+$)(?![a-zA-Z]+$)(?![_@#\-.]+$)[\w@#\-.]{8,16}$/.test(pass)
            })}
          >
            密码必须包含两种以上不同类型
          </span>
        </li>
      </ul>
    );
  };
  const handlePass = (e) => {
    setPass(e.target.value);
  };
  return (
    <div className="login-container">
      <div className="login-content">
        <div className="login-title">XXX登录界面</div>
        <Form className="login-form" onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
            validateTrigger="onBlur"
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="用户名"
              autoComplete="off"
            />
          </Form.Item>
          <Popover
            placement="right"
            title={'密码要求'}
            content={content}
            trigger="focus"
            className="password-rule"
          >
            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码' },
                {
                  pattern: /^(?!\d+$)(?![a-zA-Z]+$)(?![_@#\-.]+$)[\w@#\-.]{8,16}$/,
                  message: '请输入正确密码格式'
                }
              ]}
              validateTrigger="onBlur"
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                autoComplete="off"
                onChange={handlePass}
              />
            </Form.Item>
          </Popover>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住密码</Checkbox>
            </Form.Item>
            <a className="login-form-forgot" href="">
              忘记密码？
            </a>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Login;

index.less文件

.login-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: url('../../public/imgs/login.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
}

.login-content {
    width: 380px;
    height: 380px;
    border: 2px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 20px 30px;
}

.login-title {
    width: 100%;
    height: 40px;
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    line-height: 40px;
}

.login-form {
    width: 100%;
    height: 300px;
    padding-top: 30px;
}

.ant-input-affix-wrapper {
    height: 50px;
    padding: 8px 12px;
    border-radius: 6px;
}

.ant-input {
    line-height: 34px;
    font-size: 18px;
}

.ant-input-prefix {
    margin-right: 12px;
}

.anticon-user, .anticon-lock {
    font-size: 20px;
    color: rgb(181, 181, 181);
}

.login-form-forgot {
    float: right;
}

.ant-col-rtl .login-form-forgot {
    float: left;
}

.login-button {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    background: #1890ff;
    letter-spacing: 2px;
    padding: 0;

    span {
        width: 100%;
        height: 100%;
    }
}

ul {
    margin: 0;
    padding-left: 28px;
}

.error {
    color: #ff4d4f;
}

.correct {
    color: #1890ff;
}

最终的效果图：

login.png

暂时密码的输入要求为图中的三条限制，如果密码输入框输入的内容，每满足一条限制则右边的浮框的相应限制会变成满足效果（红色变成蓝色）。
因为会经常用到，所以记录下来，方便使用，如有侵权，请联系删除。