Валидация ввода

Часть раздела JavaScript in Action путешествия по HTML на Coddy — урок 5 из 27.

При создании форм важно предоставлять пользователям мгновенную обратную связь по мере ввода, чтобы они не отправляли неверную информацию. Это называется валидацией в реальном времени.

Сначала давайте создадим базовое поле ввода текста. Мы хотим проверить, составляет ли длина имени пользователя не менее 5 символов.

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

Теперь добавьте прослушиватель событий для проверки ввода по мере того, как пользователь печатает:

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

usernameInput.addEventListener('input', function() {
    // Получить текущее значение
    const value = this.value;
    
    // Проверить, соответствует ли оно нашим критериям
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Граница становится красной, если имя пользователя короче 5 символов, и зеленой, если оно корректно.

Задание

Легко

У нас есть страница с полем ввода электронной почты. В данный момент она не проверяет формат email.

Ваша задача — дополнить строку внутри существующего блока <strong>if</strong> так, чтобы:

Когда email содержит "@",
Граница поля ввода становилась "2px solid rgb(0, 250, 0)".

Попробуйте сами

<!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>