Javascript проверка поля input

Содержание

Валидация формы на JavaScript
Файл index.html
Регистрация
Файл style.css
Файл script.js
Комментарии ( 0 ):
Валидация input
Валидация input с помощью HTML
Валидация input с помощью JavaScript
Стилизация верного и неверного поля ввода.
Статьи из данной категории:
Комментарии ( 5 )

Валидация формы на JavaScript

Одной из самых частых задач при создании сайтов является валидация данных, введенных пользователем. Чтобы не нагружать сервер, валидацию данных можно проводить на стороне клиента, т.е. в браузера. Однако, это не значит, что данные не нужно проверять и на стороне сервера, так как пользователь может обойти ограничения браузерной валидации и отправить их непосредственно на сервер. Поэтому, обязательно проверяйте данные, вводимые пользователем, на сервере!

Файл index.html

Файл style.css

:root —success-color: #0cb854;
—error-color: #ee1f09;
>

body background-color: #f9fafb;
font-family: ‘Nunito’, sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
>

.container background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 500px;
>

h2 text-align: center;
margin: 0 0 20px;
>

.form-control margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
>

.form-control label color: rgb(58, 58, 58);
display: block;
margin-bottom: 5px;
>

.form-control input border: 2px solid #c9c9c9;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
>

.form-control input:focus outline: 0;
border-color: #777;
>

.form-control.success input border-color: var(—success-color);
>

.form-control.error input border-color: var(—error-color);
>

.form-control small color: var(—error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
>

.form-control.error small visibility: visible;
>

.form button cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
>

Файл script.js

!(function () const form = document.getElementById(«form»);
const username = document.getElementById(«username»);
const email = document.getElementById(«email»);
const password = document.getElementById(«password»);
const password2 = document.getElementById(«password2»);

// Показываем ошибку под полем
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@»]+)*)|(«.+»))@((\[1\.8\.8\.3\])|(([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();

if (checkRequired([username, email, password, password2])) checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordsMatch(password, password2);
>
>);

Таким образом, мы проводим валидацию данных в браузере, предотвращая их отправку на сервер, и тем самым снижая нагрузку на последний. Но, повторюсь, обязательно выполняйте проверку данных на сервере, так как данным, пришедшим со стороны браузера, доверять нельзя!

Создано 05.04.2022 13:42:09

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
Она выглядит вот так:
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник

Валидация input

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода.

Валидация input с помощью HTML

Для этой задачи воспользуемся атрибутом pattern . При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title ).

 Введите число
 Введите число от 1 до 9
 Введите не более 5 цифр
 "> Введите от 7 до 9 цифр
 "> Только русские слова
  Только латинские слова
 Только русские или латинские слова с пробелами, не менее 6 символов
 ">

Демонстрация. После ввода нажмите enter , чтобы посмотреть как будет вести себя форма при попытке отправки её пользователем.

Для составления более сложных паттернов необходимо хорошо знать регулярные выражения.

Более сложный пример: валидация номера телефона.

 Введите телефон в формате: +7 (777) 777-77-77 (Россия)
 [\)]\s\d[\-]\d[\-]\d" title="Используйте формат: +7 (777) 777-77-77" /> Введите телефон в формате: +375 (33) 333-33-33 (Беларусь)

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

Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода

Разрешим ввод только цифр:

document.querySelector(".myValidate").addEventListener("keyup", function()< this.value = this.value.replace(/[^\d]/g, ""); >);

Первый аргумент метода 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 считает что символы в инпуте — пустая строка. А текст — нет.