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

Часть раздела JavaScript в действии путешествия по 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 символов, и зелёной, если оно допустимо.

Задание

Легко

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

Твоя задача — дописать строку внутри существующего if блока, чтобы:

Когда адрес электронной почты содержит "@",
Рамка поля ввода становится "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>