Walidacja danych wejściowych

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 5 z 27.

Podczas tworzenia formularzy ważne jest, aby zapewniać użytkownikom natychmiastową informację zwrotną w trakcie wpisywania, aby nie wysyłali nieprawidłowych danych. Nazywa się to walidacją w czasie rzeczywistym.

Najpierw utwórzmy podstawowe pole tekstowe. Chcemy sprawdzić, czy nazwa użytkownika ma co najmniej 5 znaków.

<input type="text" id="username" placeholder="Enter username">

Teraz dodaj nasłuchiwanie zdarzenia, aby sprawdzać poprawność danych wejściowych podczas ich wpisywania przez użytkownika:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // Pobierz bieżącą wartość
    const value = this.value;
    
    // Sprawdź, czy spełnia nasze kryteria
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Obramowanie zmienia kolor na czerwony, jeśli nazwa użytkownika ma mniej niż 5 znaków, a na zielony, jeśli jest prawidłowa.

Wyzwanie

Łatwy

Mamy stronę z polem do wprowadzania adresu e-mail. Obecnie format adresu e-mail nie jest weryfikowany.

Twoje zadanie polega na uzupełnieniu wiersza wewnątrz istniejącego bloku <strong>if</strong>, tak aby:

Gdy adres e-mail zawiera "@",
Obramowanie pola zmieniało się na "2px solid rgb(0, 250, 0)".

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

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