关于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)) }}          />