При создании веб-сайтов часто возникает необходимость в проверке правильности заполнения форм пользователями. Это важно для обеспечения достоверности и полноты данных, которые будут храниться и обрабатываться системой.
- required⁚ Требует заполнения поля перед отправкой формы.
- type=»email»⁚ Проверяет, является ли введенный текст допустимым адресом электронной почты.
- type=»number»⁚ Проверяет, является ли введенный текст допустимым числом.
- pattern⁚ Устанавливает регулярное выражение для проверки формата введенного текста.
- min⁚ Устанавливает минимальное значение, которое может быть введено в числовое поле.
- max⁚ Устанавливает максимальное значение, которое может быть введено в числовое поле.
Использование JavaScript
JavaScript также можно использовать для проверки правильности заполнения формы⁚
- document.querySelector⁚ Извлекает элементы формы по селектору.
- element.value⁚ Возвращает значение элемента формы.
- element.validity.valid⁚ Проверяет, является ли значение элемента допустимым.
- element.setCustomValidity⁚ Устанавливает пользовательское сообщение об ошибке, которое отображается, когда значение элемента недопустимо.
Пример проверки полей формы
Рассмотрим пример проверки полей формы в JavaScript⁚
const form = document.querySelector(«form»);
form.addEventListener(«submit», (event) => {
event.preventDefault; // Предотвращает отправку формы
// Получение элементов формы
const name = document.querySelector(«#name»);
const email = document;querySelector(«#email»);
const password = document.querySelector(«#password»);
// Проверка заполнения поля имени
if (name.value === «») {
name.setCustomValidity(«Введите ваше имя»);
} else {
name.setCustomValidity(«»);
}
// Проверка заполнения поля электронной почты
if (email.value === «») {
email.setCustomValidity(«Введите ваш адрес электронной почты»);
} else if (!email.validity.valid) {
email.setCustomValidity(«Неверный формат электронной почты»);
} else {
email.setCustomValidity(«»);
}
// Проверка заполнения поля пароля
if (password.value === «») {
password.setCustomValidity(«Введите пароль»);
} else {
password.setCustomValidity(«»);
}
// Проверка всех полей
if (!name.validity.valid || !email.validity.valid || !password.validity.valid) {
alert(«Заполните форму правильно»);
return;
}
// Отправка формы
form.submit;
});