Валидация форм на стороне клиента с помощью JavaScript

О чём этот материал

В этой статье вы найдёте понятные объяснения и готовые фрагменты кода для самых распространённых типов проверки полей формы: email, пароль, радио-кнопки, select и чекбоксы. Кроме примеров — краткая методология внедрения, сценарии тестирования и рекомендации по безопасности.

Important: Клиентская валидация улучшает удобство, но не заменяет серверную проверку. Всегда проверяйте и санитизируйте данные на сервере.

Понимание манипуляций с DOM

DOM (Document Object Model) — это API браузера, которое позволяет JavaScript получать ссылки на элементы страницы и менять их содержимое, атрибуты и поведение. Простая операция: найти элемент по id и изменить текст.

Пример (исправленный):

Определение терминов (1 строка):

• DOM — представление HTML-документа в виде объектов, доступных из JS.

Почему важна валидация форм

HTML-формы — основной способ ввода данных пользователем. Валидация предотвращает опечатки, снижает нагрузку на сервер и снижает риск очевидных атак (плохие данные, XSS в простых случаях). Ключевая мысль: клиентская валидация — это пользовательский фильтр и первая линия защиты.

Методология: как внедрять валидацию

1. Определите набор правил для каждого поля (формат, длина, обязательность).
2. Реализуйте клиентские проверки для быстрого фидбэка.
3. Отображайте понятные сообщения пользователю рядом с полями.
4. Повторно проверяйте и санитизируйте данные на сервере.
5. Покройте тестами критичные сценарии (см. Критерии приёмки).

Валидация форм с помощью JavaScript

Ниже — типовые проверки с исправленными и рабочими примерами кода.

Email — проверка формата

HTML:

JavaScript (надёжная простая проверка формата):

const emailInput = document.getElementById('email');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
  alert('Некорректный адрес электронной почты.');
}

Примечание: HTML-атрибут type=”email” уже даёт базовую проверку в браузере, но регулярное выражение позволяет кастомизировать требования.

Пароль — длина и совпадение

HTML:

JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;

if (password !== confirmPassword) {
  alert('Пароли не совпадают.');
} else if (password.length < 7) {
  alert('Пароль должен быть не короче 7 символов.');
}

Совет: подумайте о требованиях к сложности (минимум символов разного типа) и сообщайте их пользователю заранее.

Радио-кнопки — обязательно выбрать опцию

HTML:

Мужчина


Женщина


Другое

JavaScript:

const radios = document.getElementsByName('gender');
let valid = false;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    valid = true;
    break;
  }
}
if (!valid) {
  alert('Пожалуйста, выберите один из вариантов.');
}

Используйте document.querySelector(‘input[name=”gender”]:checked’) как краткую альтернативу.

Select — проверка выбора

HTML:

  Выберите вариант
  Mr
  Mrs
  Ms

JavaScript (исправлено условие):

const title = document.getElementById('title');
if (title.value === '') {
  alert('Пожалуйста, выберите значение.');
}

Чекбокс — принятое согласие

HTML:

Я согласен с условиями использования

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
  alert('Необходимо принять условия, чтобы продолжить.');
}

Когда клиентская валидация не сработает — ограничения и контрпримеры

• Пользователь отключил JavaScript — проверки не выполнятся.
• Злоумышленник отправляет запросы напрямую на сервер, минуя форму.
• Браузер может по-разному обрабатывать нестандартные значения.

Вывод: клиентская валидация — удобство и первая линия защиты, но не замена серверной логики.

Альтернативные подходы

• Использовать встроенную браузерную валидацию HTML5 (атрибуты required, pattern, type).
• Библиотеки валидации (Yup, Joi в связке с форм-менеджерами) для сложных схем и удобных сообщений.
• Серверная валидация на основе схем (например, JSON Schema) для единого правила валидации между фронтом и бэком.

Чек-листы по ролям

Разработчик:

• Описать требования валидации для каждого поля.
• Реализовать клиентскую проверку и информативные сообщения.
• Обработать ошибки сервера и показать пользователю понятный ответ.

QA:

• Проверить сценарии с некорректными данными (email без @, короткие пароли).
• Проверить, что при отключённом JS сервер всё равно отклоняет плохие данные.
• Тестировать граничные значения и Unicode-символы.

Продукт/Продакт-менеджер:

• Утвердить требования безопасности и UX-сообщения.
• Решить, какие правила сложности пароля необходимы.

Критерии приёмки

• Все обязательные поля помечены и не позволяют сабмит при пустом значении.
• Email проходит по простому регулярному выражению и браузерному type=”email”.
• Пароли сверяются и минимум длины проверяется.
• Радио/чекбокс/ select не принимают «пустые» значения.
• Сервер повторно проверяет и отклоняет некорректные данные.

Тест-кейсы (пример)

1. Ввод: пустой email → ожидаемый результат: сообщение «Некорректный адрес».
2. Ввод: password=”abc” confirm=”abc” → ожидаемый результат: сообщение о длине.
3. Радио: ничего не выбрано → ожидание: блокировка сабмита и сообщение.
4. Отключён JS → при сабмите сервер возвращает ошибку для некорректных полей.

Короткий глоссарий (1 строка)

• Валидация — проверка данных на соответствие заранее заданным правилам.

Шпаргалка: быстрая схема принятия решения

Mermaid-диаграмма (простая логика):

flowchart TD
  A[Начало] --> B{Есть JS?}
  B -- Да --> C[Клиентская валидация]
  C --> D{Ошибки?}
  D -- Да --> E[Показать ошибки]
  D -- Нет --> F[Отправить на сервер]
  B -- Нет --> F
  F --> G[Серверная валидация]
  G --> H{Ошибки на сервере?}
  H -- Да --> I[Ответ об ошибке]
  H -- Нет --> J[Успех]

Безопасность и приватность — короткие замечания

• Никогда не доверяйте данным с клиента: валидируйте и санитизируйте на сервере.
• Для полей, где принимаются пользовательские HTML/текст (комменты, профили), применяйте экранирование или sanitizer на сервере для предотвращения XSS.
• Учитывайте требования законодательства о данных (например, GDPR) при сборе персональной информации.

Заключение

Клиентская валидация на JavaScript повышает удобство и снижает количество очевидных ошибок, но должна идти в паре с серверной проверкой. Внедряя валидацию, документируйте правила, покрывайте тестами и сообщайте пользователю понятные ошибки.

Короткая инструкция для выполнения: опишите правила → реализуйте клиентскую проверку → отобразите сообщения рядом с полями → дублируйте проверку на сервере → напишите тесты.

Summary:

• Реализуйте базовые проверки для email, паролей, радио, select и чекбоксов.
• Не полагайтесь только на клиентскую валидацию.
• Тестируйте и логируйте ошибки, чтобы улучшать правила валидации.