Skrypt 8: Sprawdzanie siły hasła na żywo

Teoria

Podpowiada użytkownikowi w trakcie wpisywania, czy jego hasło jest wystarczająco długie/mocne — poprawia jakość haseł zakładanych na stronie, jeszcze zanim formularz trafi do PHP (gdzie hasło zostanie faktycznie zahaszowane, jak w Lekcji 14 działu PHP).

Kod (JavaScript)

<input type="password" id="noweHaslo">
<p id="silaHasla"></p>

<script>
    const pole = document.getElementById("noweHaslo");
    const wskaznik = document.getElementById("silaHasla");

    pole.addEventListener("input", function () {
        const haslo = pole.value;

        if (haslo.length < 6) {
            wskaznik.textContent = "Słabe hasło (min. 6 znaków)";
        } else if (haslo.length < 10) {
            wskaznik.textContent = "Średnie hasło";
        } else {
            wskaznik.textContent = "Silne hasło";
        }
    });
</script>

Komentarz i wyjaśnienie kodu

To uproszczona wersja oceny siły hasła (samą długością) — prawdziwe systemy sprawdzają też różnorodność znaków (małe/wielkie litery, cyfry, znaki specjalne), ale zasada działania (nasłuchiwanie input i klasyfikacja instrukcją if/else if/else) jest identyczna.

Typowe błędy

Pamiętaj, że TA walidacja, podobnie jak cała walidacja JavaScript (Lekcja 8 działu JavaScript), jest tylko podpowiedzią dla użytkownika — właściwe wymogi bezpieczeństwa hasła i tak trzeba wymusić i sprawdzić ponownie po stronie serwera (PHP).