Reactでパスワード強度検出器を実装する方法

const [入力値、設定入力値] = useState('');
    const passwordChange = (値: 文字列) => {
    入力値を設定します。
};
定数 onPasswordInput = (e: 任意) => {
    パスワード変更(e?.target?.value || '');
};

<フォーム.アイテム
...
ルール={[
    {
      必須: true、
      メッセージ: 'パスワードが空ではありません'、
    },
    ({ getFieldValue }) => ({
      バリデータ(_, 値) {
        パスワード変更(値);
        (PasswordForce.invaildWord) の場合 {
          Promise.reject() を返します。
            新しいエラー('パスワードに無効な文字が含まれています。'),
          );
        }
        Promise.resolve() を返します。
      },
    }）、
]}
...

輸入 {
  ルールマッチ結果を取得、
  IpasswordForce、
  IpasswordRule、
  isMatchForceResultConfig、
  マッチ結果構成、
  パスワードブレークキー、
} '@/utils/passwordStrengthChecker' から;
React をインポートし、{ CSSProperties } を 'react' から取得します。
'react' から useEffect をインポートします。
'react' から useState をインポートします。
'styled-components' から styled をインポートします。

インターフェースプロパティ{
  入力値: 文字列;
  色?: 文字列;
  スタイル?: CSSProperties;
  クラス名?: 文字列;
  カスタムルール?: IpasswordRule[];
}
列挙型フォースマップ{
  high = '高'、
  真ん中 = '真ん中'、
  low = '低い'、
}
const boolNumSum = (リスト: ブール値[]) =>
  list.reduce<数値>(
    (前の値、現在の値) =>
      現在の値? 前の値 + 1 : 前の値、
    0,
  );

const passwordForce: (props: props) => {
  表示: React.FC;
  呼び出された単語: ブール値;
  強制: IpasswordForce;
} = ({ inputValue, style = {}, className, customRule = [] }) => {
  const [force, setforce] = useState<IpasswordForce>(false);
  const [無効な単語、setIsInvaildWord] = useState(false);
  const inputValueLen = inputValue?.length || 0;
  定数setData = () => {
    強制を設定します(false);
    定数isFirstWordUp = inputValue[0] === inputValue[0].toLocaleUpperCase();
    const ruleRsult = getRuleMatchResult(customRule, 入力値, 未定義, '');
    const matchNum = boolNumSum(ruleRsult.list.map((e) => e[passwordBreakKey]));
    定数matchResultConfig: matchResultConfig[] = [
      { 最小: 0、最大: 32、一致数: 1、値: 'low' },
      { 最小: 7、最大: 32、一致数: 2、値: '中央' },
      { 最小: 7、最大: 32、一致数: 3、値: '中央' },
      { 最小: 15、最大: 32、matchNum: 3、値: 'high'、必要: isFirstWordUp },
    ];
    setIsInvaildWord(ruleRsult.invaildWord);
    matchResultConfig.forEach((config) => {
      isMatchForceResultConfig(config、matchNum、inputValueLen) &&
        setforce(config.value);
    });
  };
  使用効果(() => {
    入力値? setData(): setforce(false);
  }, [入力値]);
  戻る {
    表示: () =>
      力 ？ （
        <PasswordForceWrap {...{ スタイル、クラス名 }}>
          {ForceMap[力]}
        </PasswordForceWrap>
      ) : (
        <></>
      ）、
    無効な単語、
    力、
  };
};
デフォルトの passwordForce をエクスポートします。

const PasswordForceWrap = styled.span`
  色: ${({ color }) => 色 ?? '#000'};
`;

'./constants' から { numberList、specialList、wordList } をインポートします。

タイプマップ = <U, T>(オプション: {
  配列: U[];
  範囲: 数値;
  マッチリスト: T[];
  tokenMap: (updateItem: T、トークン: U、インデックス: 数値) => T;
  breakKey?: 文字列;
  arrayMap?: (項目: U、インデックス: 数値) => void;
}) => T[];

/**
 * 配列を一致させて設定する
 */
エクスポートconst setArrayMatch: map = ({
  配列、
  範囲、
  マッチリスト、
  ブレークキー、
  トークンマップ、
  配列マップ、
}) => {
  const tokenLen = 配列の長さ;
  (tokenIndex = tokenLen - 1; tokenIndex >= 0; tokenIndex--) の場合 {
    const 配列トークン = 配列[トークンインデックス];
    配列マップ && 配列マップ(配列トークン、トークンインデックス);
    (findIndex = range - 1; findIndex >= 0; findIndex--) {
      matchList = matchList.map((item) =>
        トークンマップ(アイテム、配列トークン、検索インデックス)、
      );
    }
    if (breakKey && !matchList.map((e) => (e as any)[breakKey]).includes(false))
      壊す;
  }
  matchList を返します。
};

エクスポート const passwordBreakKey = 'isMatch';
エクスポートタイプ IpasswordRule = {
  リスト: 文字列[];
  isMatch: ブール値;
  名前: 文字列;
};
エクスポートconst defaultPasswordRuleList = [
  { 名前: 'special'、リスト: specialList },
  { 名前: 'num'、リスト: numberList },
  { 名前: '単語'、リスト: 単語リスト },
];

PickValue<T, K は keyof T> = T[K] を拡張します。

エクスポートconst getRuleMatchResult: (
  カスタムルール: IpasswordRule[],
  入力値: 文字列、
  デフォルトルールを無効にする?: ブール値、
  breakKey?: 文字列、
) => {
  リスト: IpasswordRule[];
  マップ: Map<PickValue<IpasswordRule, 'name'>, boolean>;
  一致カウント: 数値;
  呼び出された単語: ブール値;
} = (カスタムルール、入力値、disableDefaultRule = true、breakKey) => {
  ルールリスト = [
    ...(disableDefaultRule ? defaultPasswordRuleList : []),
    ...カスタムルール、
  ].map((item) => ({ ...item, [passwordBreakKey]: false }));
  const 範囲 = Math.max(...ruleList.map((ruleItem) => ruleItem.list.length));
  matchCount = 0 とします。
  ルールリスト = setArrayMatch<文字列、IpasswordRule>({
    配列: inputValue.split(''),
    範囲、
    マッチリスト: ルールリスト、
    // breakKey 完全一致ではない
    breakKey: breakKey === void 0 ? passwordBreakKey : breakKey,
    トークンマップ: (ルールアイテム、入力トークン、検索インデックス) => {
      const match = ルール項目?.list[findIndex] === 入力トークン;
      （一致）の場合{
        マッチカウント++;
        戻り値 { ...ruleItem, isMatch: true };
      }
      ルールアイテムを返します。
    },
  });
  戻る {
    リスト: ルールリスト、
    マップ: 新しいマップ(ruleList.map((e) => [e.name, e[passwordBreakKey]])),
    一致数、
    // この値を取得するには、breakkey を null 文字列に設定する必要があります。早期に終了すると、条件が早期に終了します。// この値を取得するには、breakkey を null 文字列に設定する必要があります
    無効な単語: matchCount !== inputValue.length、
  };
};

エクスポートconst isMatchForceResultConfig = (
  設定: matchResultConfig、
  matchNum: 数値、
  入力値の長さ: 数値、
) => {
  戻る （
    マッチ番号 === config.matchNum &&
    入力値の長さ >= config.min &&
    入力値の長さ <= config.max &&
    (config.need !== 未定義 ? config.need : true)
  );
};

エクスポートタイプmatchResultConfig = {
  min: 数値;
  最大: 数;
  matchNum: 数値;
  値: IpasswordForce;
  必要か?: ブール値;
  戻る?: IpasswordForce;
};
エクスポート タイプ IpasswordForce = false | 'high' | 'middle' | 'low';

エクスポート const specialList = ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "-", "/", ",", ".", "?", "<", ">", ";", ":", "[", "]", "{", "}", "|", "\\"];
エクスポート const numberList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
export const wordList = ["q", "a", "z", "w", "s", "x", "e", "d", "c", "r", "f", "v", "t", "g", "b", "y", "h", "n", "u", "j", "m", "i", "k", "o", "l", "p", "Q", "A", "Z", "W", "S", "X", "E", "D", "C", "R", "F", "V", "T", "G", "B", "Y", "H", "N", "U", "J", "M", "I", "K", "O", "L", "P"];