Одной из самых частых задач при создании сайтов является валидация данных, введенных пользователем. Чтобы не нагружать сервер, валидацию данных можно проводить на стороне клиента, т.е. в браузера. Однако, это не значит, что данные не нужно проверять и на стороне сервера, так как пользователь может обойти ограничения браузерной валидации и отправить их непосредственно на сервер. Поэтому, обязательно проверяйте данные, вводимые пользователем, на сервере!
// Показываем ошибку под полем function showError(input, message) const formControl = input.parentElement; formControl.className = «form-control error»; const small = formControl.querySelector(«small»); small.innerText = message; >
// Показываем, что поле заполнено верно function showSuccess(input) const formControl = input.parentElement; formControl.className = «form-control success»; >
// Проверяем адрес электронной почты на правильность function checkEmail(input) const re = /^(([^<>()\[\]\\.,;:\s@»]+(\.[^<>()\[\]\\.,;:\s@»]+)*)|(«.+»))@((\[4\.9\.5\.1\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]))$/; if (re.test(input.value.trim())) showSuccess(input); > else showError(input, «Адрес электронной почты имеет неверный формат»); > >
// Проверка обязательных полей /** * * @param inputElements * @returns */ function checkRequired(inputElements) let isRequired = false; inputElements.forEach(function (input) if (input.value.trim() === «») showError(input, `Требуется задать значение для поля $`); isRequired = true; > else showSuccess(input); > >);
// Проверяем значение поля на соответствие минимальной и максимальной длине function checkLength(input, min, max) if (input.value.length < min) showError( input, `Поле $ должно быть длиной не менее $ символов` ); > else if (input.value.length > max) showError( input, `Поле $ не должно быть длиной более $ символов` ); > else showSuccess(input); > >
// Проверка соответствия паролей function checkPasswordsMatch(input1, input2) if (input1.value !== input2.value) showError(input2, «Пароли не совпадают»); > >
// Получаем имя поля function getFieldName(input) return input.id.charAt(0).toUpperCase() + input.id.slice(1); >
// Устанавливаем слушатели событий на форму form.addEventListener(«submit», function (e) e.preventDefault();
Таким образом, мы проводим валидацию данных в браузере, предотвращая их отправку на сервер, и тем самым снижая нагрузку на последний. Но, повторюсь, обязательно выполняйте проверку данных на сервере, так как данным, пришедшим со стороны браузера, доверять нельзя!
Создано 05.04.2022 13:42:09
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Кнопка: Она выглядит вот так:
Текстовая ссылка: Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему. Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода.
Валидация input с помощью HTML
Для этой задачи воспользуемся атрибутом pattern . При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title ).
Демонстрация. После ввода нажмите enter , чтобы посмотреть как будет вести себя форма при попытке отправки её пользователем.
Для составления более сложных паттернов необходимо хорошо знать регулярные выражения.
Более сложный пример: валидация номера телефона.
Введите телефон в формате: +7 (777) 777-77-77 (Россия)
Введите телефон в формате: +375 (33) 333-33-33 (Беларусь)
Валидация input с помощью JavaScript
Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода
Первый аргумент метода replace() — это регулярное выражение (шаблон, по которому будем делать проверку), второй — пустая строка » «. Т.е. при соответствии заданного шаблона мы очищаем недопустимые символы.
d — только цифры;
^ — инверсия, т.е. получается ^d — не цифры;
/g — флаг глобальный поиск.
Т.о., пользователь не сможет ввести отличный от цифр символ.
Пример. Введите любое число:
Используя регулярные выражения можно задать абсолютно любой шаблон для input.
Стилизация верного и неверного поля ввода.
В основном комбинированием каких-то из этих трёх свойств мы оповещаем пользователя о возможности дальнейшей отправки формы.
Верный ввод при фокусе обязательного input:
НЕверный ввод при фокусе обязательного input
input:focus:required:invalid
Достаточно гибко можно стилизовать поля для ввода с помощью CSS.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии ( 5 )
Спасибо! Интересная статья. А не могли бы вы добавить как сделать маску при клике на поле, чтоб человек не делал пробелы и скобки, а просто вводил цифры номера телефона. Например: +7(___) ___-__-__ где вместо _ просто будут появляться введённые цифры.
Хорошая статья. А вот допустим такая задача, как проверить input на валидность при запрете вводить один ноль. То есть. условие для поиска type=»number» от 10 до 15 знаков. Все работает, кроме одного глюка. Поиск срабатывает если введен 0. А это неправильно, надо что бы условие поиска было строгим- «Количество чисел не меньше 10». Почему 0 проскакивает непонятно. Чем только не ограничивал-, pattern. min и тд. Ничего не поморгает, 0 все равно проходит. Подскажите в чем проблема. Как запретить ввод одного нуля? Заранее благодарен за помощь
Статья и правда хорошая, но есть недоработка. Пункт «Валидация input помощью JavaScript». Если ввести число, а потом любой символ — то удаляется вся строка. Чтобы этого избежать, стоит ставить input type text. Всё потому что number считает что символы в инпуте — пустая строка. А текст — нет.