Проверка данных на стороне клиента
Проверяйте вводимые данные перед их отправкой.
«Проверка данных на стороне клиента» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Зачем проверять данные на стороне клиента
Проверка на стороне клиента даёт мгновенную обратную связь и делает работу с приложением удобнее. Помните, что это средство удобства, а не безопасности: всегда выполняйте проверку и на сервере.
Проверка при отправке
Распространённый подход — проверять поля при отправке формы и отменять отправку, если хотя бы одно поле недопустимо.
form.addEventListener("submit", (e) => {
if (!isValid()) {
e.preventDefault();
}
});Проверка обязательного поля
Удалите пробелы по краям значения и отклоните пустой ввод. Удаление пробелов не позволяет принять строку, состоящую только из пробелов.
function checkName() {
const v = nameInput.value.trim();
return v.length > 0;
}Правила длины
Сравнивайте длину строки после удаления пробелов с минимальной и максимальной границами для таких полей, как пароли.
function checkPassword() {
const v = passwordInput.value;
return v.length >= 8 && v.length <= 64;
}Проверка по шаблону
Регулярные выражения проверяют форматы, например форматы адресов электронной почты. Делайте шаблоны простыми и дополняйте их проверками на сервере.
function checkEmail() {
const v = emailInput.value.trim();
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}Отображение сообщений об ошибках
Показывайте пояснение рядом с полем с помощью отдельного элемента для ошибки и textContent, чтобы защититься от XSS.
function showError(field, msg) {
const err = field.nextElementSibling;
err.textContent = msg;
}Очистка сообщений об ошибках
Сбрасывайте сообщение, когда поле становится допустимым, чтобы старые ошибки не оставались на экране.
function clearError(field) {
field.nextElementSibling.textContent = "";
}Проверка в реальном времени
Проверяйте данные по событию input или blur, чтобы показывать обратную связь в реальном времени, пока пользователь вводит данные или покидает поле.
emailInput.addEventListener("blur", () => {
if (!checkEmail()) showError(emailInput, "Invalid email");
else clearError(emailInput);
});Доступность с помощью aria-invalid
Устанавливайте aria-invalid и связывайте сообщения об ошибках с помощью aria-describedby, чтобы вспомогательные технологии сообщали о проблемах.
emailInput.setAttribute("aria-invalid", "true");Переход к первой ошибке
После неудачной отправки переместите фокус на первое недопустимое поле, чтобы пользователь мог сразу исправить его.
function focusFirstError(fields) {
const bad = fields.find((f) => !f.valid);
if (bad) bad.el.focus();
}Проверяйте данные и на сервере
Клиентскую проверку можно обойти, отключив JavaScript или сформировав запрос вручную. Считайте сервер источником истины.
Быстрая проверка
Мышление с учётом безопасности.
Итоги
Ручная проверка оценивает поля по обязательности, длине и шаблону и при ошибке отменяет отправку с помощью preventDefault. Безопасно показывайте и очищайте сообщения через textContent, выполняйте проверку в реальном времени по событиям input/blur, повышайте доступность с помощью aria-invalid и переводите фокус на первую ошибку. Всегда повторно проверяйте данные на сервере.
Часто задаваемые вопросы
Урок «Проверка данных на стороне клиента» бесплатный?
Да — полный текст урока «Проверка данных на стороне клиента» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Проверка данных на стороне клиента»?
Проверяйте вводимые данные перед их отправкой. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Проверка данных на стороне клиента»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Чтение значений полей ввода
- Событие submit
- Проверка данных на стороне клиента
- API проверки ограничений