API проверки ограничений
Используйте встроенную проверку корректности данных.
«API проверки ограничений» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Встроенная проверка
Поля HTML-форм поддерживают такие атрибуты, как required, min, max, pattern и type="email". API проверки ограничений позволяет JavaScript проверять встроенные ограничения и управлять ими.
checkValidity
checkValidity возвращает логическое значение и вызывает событие invalid для каждого элемента управления с ошибкой, не показывая всплывающее сообщение браузера.
const email = document.querySelector("#email");
console.log(email.checkValidity());reportValidity
reportValidity работает подобно checkValidity, но также показывает встроенное сообщение браузера о недопустимых полях.
if (!form.reportValidity()) {
console.log("show built-in errors");
}Объект validity
У каждого элемента управления есть объект validity с логическими флагами, точно описывающими возникшую проблему.
console.log(email.validity.valueMissing); // empty required
console.log(email.validity.typeMismatch); // wrong format
console.log(email.validity.tooShort);validity.valid
validity.valid имеет значение true только тогда, когда поле соответствует всем ограничениям, и обобщает остальные флаги.
if (email.validity.valid) {
console.log("ok");
}validationMessage
validationMessage содержит локализованное сообщение, которое браузер показал бы для текущей ошибки.
console.log(email.validationMessage);setCustomValidity
setCustomValidity помечает поле как недопустимое и задаёт Ваше собственное сообщение. Непустая строка означает ошибку, а пустая строка её сбрасывает.
function checkMatch() {
if (pass.value !== confirm.value) {
confirm.setCustomValidity("Passwords must match");
} else {
confirm.setCustomValidity("");
}
}Всегда очищайте собственные ошибки
Если Вы задали собственное сообщение, после исправления ошибки необходимо очистить его пустой строкой, иначе поле навсегда останется недопустимым.
confirm.addEventListener("input", () => {
confirm.setCustomValidity("");
checkMatch();
});Событие недопустимого значения
Слушайте событие invalid, чтобы выполнять собственную логику, например изменять оформление поля при ошибке проверки.
email.addEventListener("invalid", () => {
email.classList.add("error");
});Отключение встроенных всплывающих сообщений
Добавьте к форме атрибут novalidate, чтобы отключить встроенные всплывающие сообщения и при этом использовать API для собственных уведомлений.
form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
if (!form.checkValidity()) e.preventDefault();
});Оформление с помощью :valid и :invalid
Псевдоклассы CSS :valid и :invalid автоматически оформляют поля в зависимости от их состояния проверки.
Быстрая проверка
Собственное правило проверки.
Итоги
API проверки ограничений работает с атрибутами ограничений HTML. Используйте checkValidity/reportValidity, чтобы проверить ошибки и при необходимости показать их, изучайте флаги объекта validity и свойство validationMessage, а собственные правила добавляйте с помощью setCustomValidity (для очистки передавайте пустую строку). Событие invalid и CSS-псевдоклассы :valid/:invalid помогают оформлять поля.
Часто задаваемые вопросы
Урок «API проверки ограничений» бесплатный?
Да — полный текст урока «API проверки ограничений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «API проверки ограничений»?
Используйте встроенную проверку корректности данных. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «API проверки ограничений»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Чтение значений полей ввода
- Событие submit
- Проверка данных на стороне клиента
- API проверки ограничений