So implementieren Sie einen Kennwortstärke-Detektor in React

const [Eingabewert, gesetzter Eingabewert] = useState('');
    const passwordChange = (Wert: Zeichenfolge) => {
    setInputValue(Wert);
};
const onPasswordInput = (e: beliebig) => {
    Passwortänderung(e?.Ziel?.Wert || '');
};

<Formular.Element
...
Regeln={[
    {
      erforderlich: wahr,
      Meldung: „Passwort nicht leer“,
    },
    ({ getFieldValue }) => ({
      validator(_, Wert) {
        Passwortänderung(Wert);
        wenn (PasswordForce.invaildWord) {
          returniere Promise.reject(
            neuer Fehler('Das Passwort enthält ungültige Zeichen.'),
          );
        }
        gibt Promise.resolve() zurück;
      },
    }),
]}
...

importieren {
  getRuleMatchResult,
  IpasswordForce,
  IpasswordRule,
  isMatchForceResultConfig,
  matchResultConfig,
  PasswortBreakKey,
} von '@/utils/passwordStrengthChecker';
importiere React, { CSSProperties } von „react“;
importiere { useEffect } von 'react';
importiere { useState } von „react“;
Importiere Stile aus „Stilkomponenten“;

Schnittstelleneigenschaften {
  Eingabewert: Zeichenfolge;
  Farbe?: Zeichenfolge;
  Stil?: CSS-Eigenschaften;
  Klassenname?: Zeichenfolge;
  benutzerdefinierteRegel?: IpasswordRule[];
}
Aufzählung ForceMap {
  high = "Hoch",
  Mitte = 'Mitte',
  low = "Niedrig",
}
const boolNumSum = (Liste: boolean[]) =>
  Liste.reduzieren<Zahl>(
    (vorherigerWert, aktuellerWert) =>
      aktuellerWert ? vorherigerWert + 1 : vorherigerWert,
    0,
  );

const passwordForce: (props: props) => {
  Ansicht: React.FC;
  aufgerufenes Wort: Boolesch;
  erzwingen: IpasswordForce;
} = ({ Eingabewert, Stil = {}, Klassenname, benutzerdefinierte Regel = [] }) => {
  const [force, setforce] = useState<IpasswordForce>(false);
  const [invaildWord, setIsInvaildWord] = useState(false);
  const Eingabewertlänge = Eingabewert?.Länge || 0;
  const setData = () => {
    setze Kraft (falsch);
    const isFirstWordUp = Eingabewert[0] === Eingabewert[0].toLocaleUpperCase();
    const ruleRsult = getRuleMatchResult(customRule, inputValue, undefiniert, '');
    const matchNum = boolNumSum(ruleRsult.list.map((e) => e[passwordBreakKey]));
    const matchResultConfig: matchResultConfig[] = [
      { min: 0, max: 32, matchNum: 1, Wert: "niedrig" },
      { min: 7, max: 32, matchNum: 2, Wert: 'Mitte' },
      { min: 7, max: 32, matchNum: 3, Wert: 'Mitte' },
      { min: 15, max: 32, matchNum: 3, Wert: ‚hoch‘, Bedarf: isFirstWordUp },
    ];
    setIsInvaildWord(ruleRsult.invaildWord);
    matchResultConfig.forEach((config) => {
      isMatchForceResultConfig(Konfiguration, Übereinstimmungsnummer, Eingabewertlänge) &&
        setforce(Konfigurationswert);
    });
  };
  useEffect(() => {
    Eingabewert? setData() : setforce(false);
  }, [Eingabewert]);
  zurückkehren {
    Ansicht: () =>
      Gewalt ? (
        <PasswordForceWrap {...{ Stil, Klassenname }}>
          {ForceMap[Kraft]}
        </PasswordForceWrap>
      ) : (
        <></>
      ),
    ungültiges Wort,
    Gewalt,
  };
};
Standard-PasswortForce exportieren;

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

importiere { Zahlenliste, Spezialliste, Wortliste } aus './Konstanten';

Typzuordnung = <U, T>(Option: {
  Array: U[];
  Bereich: Zahl;
  Übereinstimmungsliste: T[];
  tokenMap: (updateItem: T, token: U, index: Nummer) => T;
  Unterbrechungsschlüssel?: Zeichenfolge;
  ArrayMap?: (Element: U, Index: Zahl) => ungültig;
}) => T[];

/**
 * Array und Set abgleichen
 */
exportiere const setArrayMatch: map = ({
  Anordnung,
  Reichweite,
  Übereinstimmungsliste,
  Schlüssel abbrechen,
  TokenMap,
  ArrayMap,
}) => {
  const tokenLen = Array.Länge;
  für (let tokenIndex = tokenLen - 1; tokenIndex >= 0; tokenIndex--) {
    const arrayToken = array[tokenIndex];
    arrayMap && arrayMap(arrayToken, tokenIndex);
    für (let findIndex = Bereich - 1; findIndex >= 0; findIndex--) {
      Übereinstimmungsliste = Übereinstimmungsliste.map((Element) =>
        tokenMap(Element, Array-Token, Index finden),
      );
    }
    wenn (breakKey && !matchList.map((e) => (e wie jeder)[breakKey]).includes(false))
      brechen;
  }
  gibt Übereinstimmungsliste zurück;
};

exportiere const passwordBreakKey = "isMatch";
Exporttyp IpasswordRule = {
  Liste: Zeichenfolge[];
  isMatch: boolesch;
  Name: Zeichenfolge;
};
exportiere const defaultPasswordRuleList = [
  { Name: 'Spezial', Liste: Spezialliste },
  { Name: 'num', Liste: Zahlenliste },
  { Name: 'Wort', Liste: Wortliste },
];

Typ PickValue<T, K erweitert Schlüssel von T> = T[K];

exportiere const getRuleMatchResult: (
  benutzerdefinierte Regel: IpasswordRule[],
  Eingabewert: Zeichenfolge,
  Standardregel deaktivieren?: Boolesch,
  breakKey?: Zeichenfolge,
) => {
  Liste: IpasswordRule[];
  Karte: Karte<PickValue<IpasswordRule, 'name'>, boolean>;
  matchCount: Zahl;
  aufgerufenes Wort: Boolesch;
} = (benutzerdefinierte Regel, Eingabewert, Standardregel deaktivieren = true, Schlüsselwert unterbrechen) => {
  let Regelliste = [
    ...(disableDefaultRule ? defaultPasswordRuleList : []),
    ...benutzerdefinierteRegel,
  ].map((item) => ({ ...item, [passwordBreakKey]: false }));
  const range = Math.max(...ruleList.map((ruleItem) => ruleItem.list.length));
  lass matchCount = 0;
  Regelliste = setArrayMatch<Zeichenfolge, IpasswordRule>({
    Array: Eingabewert.split(''),
    Reichweite,
    Übereinstimmungsliste: Regelliste,
    // keine vollständige Übereinstimmung mit breakKey
    breakKey: breakKey === void 0 ? passwordBreakKey : breakKey,
    tokenMap: (Regelelement, Eingabetoken, Suchindex) => {
      const match = Regelelement?.list[Suchindex] === Eingabetoken;
      wenn (Übereinstimmung) {
        Übereinstimmungsanzahl++;
        return { ...ruleItem, isMatch: true };
      }
      Regelelement zurückgeben;
    },
  });
  zurückkehren {
    Liste: Regelliste,
    Karte: neue Karte (Regelliste.Karte ((e) => [e.Name, e[PasswortBreakKey]])),
    Übereinstimmungsanzahl,
    // Um ​​diesen Wert zu erhalten, muss breakkey auf einen Null-String gesetzt werden. Wenn Sie vorzeitig beenden, wird der Zustand vorzeitig beendet. // Um ​​diesen Wert zu erhalten, muss breakkey auf einen Null-String gesetzt werden
    ungültiges Wort: matchCount !== Eingabewert.Länge,
  };
};

exportiere const isMatchForceResultConfig = (
  Konfiguration: matchResultConfig,
  matchNum: Zahl,
  inputValueLen: Zahl,
) => {
  zurückkehren (
    Übereinstimmungsnummer === Konfiguration.Übereinstimmungsnummer &&
    Eingabewertlänge >= config.min &&
    Eingabewertlänge <= config.max &&
    (config.need !== undefiniert ? config.need : true)
  );
};

Exporttyp matchResultConfig = {
  min: Zahl;
  max: Zahl;
  Übereinstimmungsnummer: Nummer;
  Wert: IpasswordForce;
  brauchen?: Boolesch;
  zurück?: IpasswordForce;
};
Exporttyp IpasswordForce = false | „hoch“ | „mittel“ | „niedrig“;

export const specialList = ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "-", "/", ",", ".", "?", "<", ">", ";", ":", "[", "]", "{", "}", "|", "\\"];
export 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"];