wtorek, 2024-02-13

JS: Siła hasła

To proste ćwiczenie jest świetnym przykładem na pokazanie, jak można używać JavaScriptu do interaktywnej walidacji danych wejściowych w formularzach HTML oraz okazją do treningu z nieskomplikowanymi wyrażeniami regularnymi Stworzenie formularza HTML do sprawdzania siły hasła w języku JavaScript może być interesującym zadaniem. Oto prosta implementacja i omówienie tego zadania:

Zadanie

Wykonaj formularz HTML, który zawiera pole do wprowadzania hasła. Użyj JavaScriptu, aby ocenić siłę wprowadzonego hasła w czasie rzeczywistym. Siła hasła powinna być określona na podstawie następujących kryteriów:

długość hasła (minimum 8 znaków),
zawiera zarówno małe, jak i duże litery,
zawiera przynajmniej jedną cyfrę,
zawiera przynajmniej jeden znak specjalny (np. @, #, $, %).

Rozwiązanie

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Sprawdzanie Siły Hasła</title>
</head>
<body>
    <h2>Sprawdź siłę swojego hasła</h2>
    <form>
        <input type="password" id="passwordInput" placeholder="Wpisz swoje hasło">
        <p id="passwordStrength">Siła hasła: </p>
    </form>
    <script src="passwordStrength.js"></script>
</body>
</html>

JavaScript

Zawartość pliku passwordStrength.js:

document.getElementById('passwordInput').addEventListener('input', function() {
    const password = this.value;
    const strengthText = document.getElementById('passwordStrength');
    let strength = 0;

    if (password.length >= 8) strength++;
    if (/[a-ząćęłńóśźż]/.test(password)) strength++;
    if (/[A-ZĄĆĘŁŃÓŚŹŻ]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^A-Za-z0-9ąćęłńóśźżĄĆĘŁŃÓŚŹŻ]/.test(password)) strength++;

    switch(strength) {
        case 0:
        case 1:
            strengthText.textContent = 'Siła hasła: Tragedia';
            break;
        case 2:
            strengthText.textContent = 'Siła hasła: Słabe';
            break;
        case 3:
            strengthText.textContent = 'Siła hasła: Średnie';
            break;
        case 4:
            strengthText.textContent = 'Siła hasła: Dobre';
            break;
        case 5:
            strengthText.textContent = 'Siła hasła: Silne';
            break;
    }
});

Omówienie

Formularz HTML – utwórz prosty formularz z polem input typu password i pustym akapitem do wyświetlania komunikatu na temat siły hasła.
Dla obydwu elementów nadaj identyfikatory – będzie można łatwo się do nich odwołać.
Dodaj nasłuchiwanie zdarzeń (addEventListener) do pola input, aby reagować na każdą zmianę w polu hasła.
Ocena siły hasła – w skrypcie JavaScript, sprawdzaj hasło pod kątem wymienionych kryteriów przy użyciu wyrażeń regularnych i zwiększaj wartość zmiennej strength za każde spełnione kryterium.
Wyświetlanie wyniku – na podstawie wartości strength, wyświetlaj odpowiedni komunikat.

Wykorzystane wyrażenia regularne

Te cztery wyrażenia regularne są często używane w JavaScript do przeszukiwania, walidacji i manipulacji tekstem. Pozwalają na precyzyjne określenie, jakiego rodzaju znaki mają być dopasowane w danym ciągu. Stanowią nieskomplikowany niezbędnik w arsenale programisty JavaScript.

Wyrażenie [a-ząćęłńóśźż] – odpowiada dowolnemu pojedynczemu znakowi z zakresu małych liter alfabetu angielskiego (od 'a' do 'z') oraz do małych polskich liter z diakrytykami (ą, ć, ę, ł, ń, ó, ś, ź, ż). Nie obejmuje wielkich liter, cyfr ani żadnych znaków specjalnych.
Wyrażenie [A-ZĄĆĘŁŃÓŚŹŻ] – odpowiada dowolnemu pojedynczemu znakowi z zakresu wielkich liter alfabetu angielskiego (od 'A' do 'Z') oraz wielkich polskich liter z diakrytykami (Ą, Ć, Ę, Ł, Ń, Ó, Ś, Ź, Ż). Nie obejmuje małych liter, cyfr ani żadnych znaków specjalnych.
Wyrażenie [0-9] – odpowiada dowolnej pojedynczej cyfrze od 0 do 9. Jest to równoważne z d w większości dialektów wyrażeń regularnych, w tym w JavaScript. Nie obejmuje liter ani znaków specjalnych.
Wyrażenie [^A-Za-z0-9ąćęłńóśźżĄĆĘŁŃÓŚŹŻ] – jest negacją zestawu znaków. Odpowiada dowolnemu znakowi, który NIE jest ani wielką literą (A-Z, Ą, Ć, Ę, Ł, Ń, Ó, Ś, Ź, Ż), ani małą literą (a-z, ą, ć, ę, ł, ń, ó, ś, ź, ż), ani cyfrą (0-9). Zatem pasuje do wszystkich znaków specjalnych, spacji, znaków interpunkcyjnych oraz innych znaków narodowych, które nie są uwzględnione w zestawie.

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie