关于react.js:React-TS-封装密码强度组件

在 antd 的 Progress 的根底上封装
PwdStrength.tsx

import {Col, Progress, Row} from 'antd';
import {FC} from 'react';
import styles from './index.less';
interface IPwdStrengthProps {pwdStrength: 0 | 1 | 2 | 3;}
const PwdStrength: FC<IPwdStrengthProps> = ({pwdStrength}) => {
  return (<div className={styles.passwordStrongBox}>
      <Row gutter={12}>
        <span className={styles.passWord}> 明码强度 </span>
        <Col span={3}>
          <Progress className={styles.weak} percent={pwdStrength > 0 ? 100 : 0} showInfo={false} />
        </Col>
        <Col span={3}>
          <Progress className={styles.middle} percent={pwdStrength > 1 ? 100 : 0} showInfo={false} />
        </Col>
        <Col span={3}>
          <Progress className={styles.strong} percent={pwdStrength > 2 ? 100 : 0} showInfo={false} />
        </Col>
        <span className="passStrong">
          {pwdStrength === 1 && '弱'}
          {pwdStrength === 2 && '中'}
          {pwdStrength === 3 && '强'}
        </span>
      </Row>
    </div>
  );
};
export default PwdStrength;

笼罩原有款式，依据强度各个进度显式不同色彩，款式献上
index.less

.passwordStrongBox {
  margin-top: 4px;
  .weak {
    :global .ant-progress-bg {background-color: #f50 !important;}
  }

  .middle {
    :global .ant-progress-bg {background-color: #e4ce2b !important;}
  }

  .strong {
    :global .ant-progress-bg {background-color: #87d068 !important;}
  }

  .passWord {
    display: inline-block;
    margin: 3px 8px 0 6px;
    color: rgba(140, 140, 140, 100);
    font-size: 12px;
  }
  .passStrong {
    display: inline-block;
    margin: 3px 0 0 8px;
    color: rgba(89, 89, 89, 100);
    font-size: 11px;
  }
}

利用正则判断用户输出的明码的强度
useChangePassword.ts

const pattern_1 = /^.*([0-9])+.*$/i; // 数字
const pattern_2 = /[a-z]/; // 小写字母
const pattern_3 = /[A-Z]/; // 大写字母
const pattern_4 = /[`~!@#$%^&*()\-_+=\\|{}':;\",\[\].<>\/?~！@#￥%……&*（）——+|{}【】‘；：”“’。，、？]/; // 特殊字符
export function useChangePassword() {const getPwdStrength = (pwd: string): 0 | 1 | 2 | 3 => {
    let level = 0;
    if (pwd) {pwd = pwd.trim();
      if (pwd.length >= 6) {if (pattern_1.test(pwd)) {level++;}
        if (pwd.length > 10) {level++;}
        if (pattern_2.test(pwd) || pattern_3.test(pwd)) {level++;}
        if (pattern_4.test(pwd)) {level++;}
        if (level > 3) {level = 3;}
      }
    }

    return level as 0 | 1 | 2 | 3;
  };
  return {getPwdStrength,};
}

数据管理
store.ts

import {reduxStore} from '@/createStore';
export const store = reduxStore.defineLeaf({
  namespace: 'personal',
  initialState: {pwdStrength: 0 as 0 | 1 | 2 | 3,},
  reducers: {changePwdStrength(state, payload: 0 | 1 | 2 | 3) {state.pwdStrength = payload;},
  },
});

应用

import {store} from '../../store';
import PwdStrength from '../PwdStrength';
 const {pwdStrength} = store.useState();
const {getPwdStrength} = useChangePassword();


  <ProFormText.Password
            placeholder="新密码"
            rules={[
              {
                required: true,
                message: '请输出新密码',
              },
            ]}
            width="md"
            name="newPassword"
            label="新密码"
            help={<PwdStrength pwdStrength={pwdStrength} />}
            fieldProps={{onChange: (e) => store.changePwdStrength(getPwdStrength(e.target.value)) }}
          />