• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

walidacja hasła "na żywo", ad hoc

VPS Starter Arubacloud
+1 głos
355 wizyt
pytanie zadane 1 kwietnia 2022 w JavaScript przez Vintar Nowicjusz (130 p.)

Cześć!

Od jakiegoś czasu intensywnie uczę się programowania, aktualnie na tapecie HTML, CSS i JavaScript.

No i mam zadanie, w którym mam napisać prosty sprawdzacz hasła, który na żywo będzie wyświetlał komunikat, że czegoś w haśle brak, na zasadzie "Hasło musi zawierać małą literę!", "Hasło musi zawierać wielką literę!", "Hasło musi zawierać cyfrę!", "Hasło musi zawierać znak specjalny!". Komunikaty powinny wyświetlać się w momencie zaczęcia wpisywania hasła i kolejno znikać po spełnieniu warunków.

I... nie mam pojęcia, czemu mi nie działa, próbowałem na przeróżne sposoby... :/


<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Hasłosprawdzacz</title>
    <meta name="description" content="Sprawdzacz poprawności hasła.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    
</head>

<body>
    <form style="max-width: 200px; width: 100%; margin: auto; text-align: center;">
        <div>
            <label for="password">Hasło</legend>
            <input type="password" id="password" onkeyup="validatePassword()">
        </div>

        <p class="errors" id="too_short"></p>
        <p class="errors" id="without_lowercase"></p>
        <p class="errors" id="without_uppercase"></p>
        <p class="errors" id="without_digits"></p>
        <p class="errors" id="without_special_chars"></p>

        <div>
            <label for="repeatedPassword">Powtórz hasło</legend>
            <input type="password" id="repeatedPassword">
        </div>

        <p class="errors" id="different_passwords"></p>

    </form>
    
    <script src="script.js"></script>
</body>


</html>

function validatePassword() {
    let pass = document.getElementById('password').value;
    
    if (pass.length < 8) {
        let tooShortError = document.getElemntById("too_short").value;
        tooShortError.textContent = "Hasło jest za krótkie! Musi zawierać min. 8 znaków.";
    }

    if (!/[a-z]/.test(pass)) {
        document.getElementById("without_lowercase").innerHTML = "Hasło musi zawierać min. jedną małą literę.";
    }

    if (!/[A-Z]/.test(pass)) {
        document.getElementById("without_uppercase").innerHTML = "Hasło musi zawierać min. jedną wielką literę."; 
    }

    if (!/[0-9]/.test(pass)) {
        document.getElementById("without_digits").innerHTML = "Hasło musi zawierać min. jedną cyfrę.";
    }

    if (!/[!#$%&? "]/.test(pass)) {
        document.getElementById("without_special_chars").innerHTML = "Hasło musi zawierać min. jednen znak specjalny."; 
    }
    
}

Będę dozgonnie wdzięczny za każdą podpowiedź! :) 

2 odpowiedzi

0 głosów
odpowiedź 1 kwietnia 2022 przez adrian17 Ekspert (344,100 p.)

Po pierwsze, masz literówki w kodzie - zajrzyj do konsoli przeglądarki, od razu o nich mówi.

Po drugie, tutaj źle używasz element - o tym też przeglądarka krzyczy w konsoli:

        let tooShortError = document.getElemntById("too_short").value;
        tooShortError.textContent = "Hasło jest za krótkie! Musi zawierać min. 8 znaków.";

Po trzecie, nigdzie nie masz kodu który by czyścił komunikat o błędzie gdy tekst spełni warunek.

A na boku, zmień innerHTML na textContent w pozostałych miejscach :)

komentarz 2 kwietnia 2022 przez Vintar Nowicjusz (130 p.)
edycja 3 kwietnia 2022 przez ScriptyChris

Dzięki, @adrian17!

Wydaje mi się, że zrobiłem to, o czym piszesz - i od razu przepraszam, za głupie błędy, jak ta literówka czy nie jednolite użycie textContent - wiele razy to zmieniałem i zwyczajnie nie zauważyłem takich głupot. :/

no ale...

ciągle mi nie działa. :/ Ciągle wywala mi błąd:

Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

I wciąż nie rozumiem, co robię źle... :/


<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Hasłosprawdzacz</title>
    <meta name="description" content="Sprawdzacz poprawności hasła.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <form style="max-width: 200px; width: 100%; margin: auto; text-align: center;">
        <div>
            <label for="password">Hasło</legend>
            <input type="password" id="password" onkeyup="validatePassword()">
        </div>

        <p class="errors" id="too_short"> </p>
        <p class="errors" id="without_lowercase"> </p>
        <p class="errors" id="without_uppercase"> </p>
        <p class="errors" id="without_digits"> </p>
        <p class="errors" id="without_special_chars"> </p>

        <div>
            <label for="repeatedPassword">Powtórz hasło</legend>
            <input type="password" id="repeatedPassword">
        </div>

        <p class="errors" id="different_passwords"></p>

    </form>
    
    
</body>


</html>

function validatePassword() {
    let pass = document.getElementById('password').value;
    
    if (pass.length < 8) {
        let tooShortError = document.getElementById("too_short").value;
        tooShortError.textContent = "Hasło jest za krótkie! Musi zawierać min. 8 znaków.";
    }

    if (!/[a-z]/.test(pass)) {
        let withoutLowercaseError = document.getElementById("without_lowercase").value;
        withoutLowercaseError.textContent = "Hasło musi zawierać min. jedną małą literę.";
    }

    if (!/[A-Z]/.test(pass)) {
        let withoutUppercaseError = document.getElementById("without_uppercase").value;
        withoutUppercaseError.textContent = "Hasło musi zawierać min. jedną wielką literę."; 
    }

    if (!/[0-9]/.test(pass)) {
        let withoutDigitsError = document.getElementById("without_digits").value;
        withoutDigitsError.textContent = "Hasło musi zawierać min. jedną cyfrę.";
    }

    if (!/[!#$%&? "]/.test(pass)) {
        let withoutSpecialCharsError = document.getElementById("without_special_chars").value;
        withoutSpecialCharsError.textContent = "Hasło musi zawierać min. jednen znak specjalny."; 
    }

    validatePassword();
    
}

Jeśli to możliwe, to znów proszę o jakieś podpowiedzi...

Co miałeś na myśli, mówiąc, że "źle używam elementu"?

0 głosów
odpowiedź 3 kwietnia 2022 przez VBService Ekspert (251,270 p.)
edycja 3 kwietnia 2022 przez VBService
document.getElementById("too_short").value
document.getElementById("without_lowercase").value
document.getElementById("without_uppercase").value
document.getElementById("without_digits").value
document.getElementById("without_special_chars").value

odwołujesz się do elementu <p>

        <p class="errors" id="too_short"> </p>
        <p class="errors" id="without_lowercase"> </p>
        <p class="errors" id="without_uppercase"> </p>
        <p class="errors" id="without_digits"> </p>
        <p class="errors" id="without_special_chars"> </p> 

który nie zawiera atrybutu value, czyli powinno być raczej

const tooShortError = document.getElementById("too_short");
const withoutLowercaseError = document.getElementById("without_lowercase");

// itd.

 

propozycja zmian z użyciem tablicy dla "errors"

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <title>Hasłosprawdzacz</title>
    <meta name="description" content="Sprawdzacz poprawności hasła.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form style="max-width: 200px; width: 100%; margin: auto; text-align: center;">
      <div>
        <label for="password">Hasło</legend>
        <input type="password" id="password" onkeyup="validatePassword()">
      </div>

      <p class="errors" id="check-password"></p>

      <div>
        <label for="password-repeated">Powtórz hasło</legend>
        <input type="password" id="password-repeated">
      </div>

      <p class="errors" id="check-password-repeated"></p>
    </form>

    <script src="script.js"></script>
  </body>
</html>
/* dodatkowy css */
.errors {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  margin: 1em 0;
  color: red;
  font: 300 0.75em/1.1 monospace;
}
function validatePassword() {
  const password_value = (document.getElementById('password').value).trim(),
        check_password = document.querySelector('#check-password');
  const errors = [];
 
  if (password_value.length < 8)
    errors.push('Hasło jest za krótkie! Musi zawierać min. 8 znaków.');
 
  if (!/[a-z]/.test(password_value))
    errors.push('Hasło musi zawierać min. jedną małą literę.');
 
  if (!/[A-Z]/.test(password_value))
    errors.push('Hasło musi zawierać min. jedną wielką literę.');
 
  if (!/[0-9]/.test(password_value))
    errors.push('Hasło musi zawierać min. jedną cyfrę.');
 
  if (!/[!#$%&?_"]/.test(password_value))
    errors.push('Hasło musi zawierać min. jednen znak specjalny.');
 
  if (errors)
    check_password.innerHTML = errors.join('<br>');
}

 

Podobne pytania

0 głosów
0 odpowiedzi 264 wizyt
0 głosów
2 odpowiedzi 384 wizyt
pytanie zadane 24 listopada 2017 w JavaScript przez Warcabiak Użytkownik (500 p.)
0 głosów
1 odpowiedź 10,543 wizyt
pytanie zadane 2 stycznia 2017 w JavaScript przez Michał_Warmuz Mądrala (5,830 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...