Проверяем правильность ввода пароля
Здравствуйте, уважаемый посетитель!
Сегодня создадим дополнительные инструменты проверки правильности ввода пароля. Ведь людям свойственно ошибаться, и очевидно, что такое может случаться и при заполнении таких полей.
Поэтому наша задача заключается в том, чтобы гарантировано исключить возникновение каких-либо ошибок при вводе пользовательских комбинаций символов пароля.
В предыдущей статье, используя регулярное выражение в атрибуте pattern, мы уже обеспечили корректность ввода для поля "Пароль" в соответствии с шаблоном. Который допускает ввод только цифр и букв латинского алфавита в количестве не менее 6-ти.
Однако, этого недостаточно, так как при указании пароля необходимо вводить его не один раз, а два - второй для подтверждения. И комбинации символов в обоих случаях должны строго соответствовать друг другу. Вот такую проверку мы сейчас и сделаем. При этом выполняться она будет в два этапа.
В первом случае будут проверяться значения полей в ходе их заполнения. Что позволит пользователю контролировать корректность ввода комбинаций символов до отправки формы.
На втором этапе будет осуществляться валидация пароля в момент отправки формы. И в случае несоответствия, форма будет блокироваться с выводом сообщения об ошибке.
Содержание
- Проверяем правильность ввода пароля при заполнении полей
- Выполняем валидацию пароля при отправке формы
- Исходные файлы сайта
Проверяем правильность ввода пароля при заполнении полей
Для создания инструмента такой проверки воспользуемся библиотекой jQuery. Это позволит составить нужный скрипт со значительно меньшим объемом кода в сравнении, если для этого использовать чистый JavaScript.
При этом для вызова события применим обработчик возвращения клавиши клавиатуры из нажатого в не нажатое состояние .keyup(). Данный метод вполне подойдет для нашего случая, обеспечив таким образом проверку на соответствие введенных комбинаций символов каждый раз после ввода с клавиатуры нового значения.
Код такого скрипта приведен в следующей таблице.
-
//---------Проверка комбинаций символов при вводе пароля------------
-
$("input[type='password']").keyup(function() {
-
var password_1 = $("input[name='client-password_1']").val();
-
var password_2 = $("input[name='client-password_2']").val();
-
if (password_1 != password_2 && password_1 != "" && password_2 != "") {
-
if (!$("div").is(".password_2 div:nth-child(3)")) {
-
$(".password_2")
-
.append('
Пароли не совпадают'); -
}
-
else {
-
var text = $(".password_2 div:nth-child(3)").text();
-
if (text == "") {
-
$(".password_2 div:nth-child(3)")
-
.text('Пароли не совпадают');
-
}
-
}
-
$("input[name='client-password_2']")
-
.css("background", "#ffcab2");
-
}
-
else {
-
$(".password_2 div:nth-child(3)")
-
.empty();
-
$("input[name='client-password_2']")
-
.css("background", "#fdfadc");
-
}
-
});
Рис.1 Скрипт проверки комбинаций символов при вводе пароля
Как выше было отмечено, для выполнения скрипта здесь используется обработчик события .keyup()). Причем, этот метод будет выполняться только при изменении значений в полях, предназначенных для ввода пароля, обозначенных как "input[type='password']" (поз.2).
Таким образом, после каждого ввода с клавиатуры нового символа будет выполняться проверка на соответствие значений полей. И если введенные комбинации символов будут неодинаковы, то рядом с полем повторного ввода будет возникать соответствующая запись. А дополнительно к этому, будет меняться также и цвет фона поля.
Выполняться это следующим образом.
В качестве проверяемых значений здесь назначены две переменные: "password_1" для первого поля (поз.3) и, соотвественно, "password_2"- для повторного ввода (поз.4).
А далее, с помощью условного оператора, при непустых значениях этих переменных и их неравенстве (поз.5) будут выполняться действия, соответствующие такому состоянию.
Так, в случае, если в изначальном состоянии в контейнере с классом "password_2" будет отсутствовать 3-тий по порядку блочный элемент
Если же в контейнере с классом "password_2" уже будет находиться третий элемент
И последнее, что произойдет при несовпадении паролей, это изменение цвета фона поля, предназначенного для повторного ввода. В этом случае для элемента "input[name='client-password_2']" (поз.17) применяется функция .css(), с помощью которой свойству background присваивается значение #ffcab2. Окрашивая таким образом фон этого поля в розовый цвет.
Что же касается действий, которые выполняются при одинаковых значениях полей, то они определены в позициях 21÷24. Где сначала с помощью метода .empty() из выбранного элемента ".password_2 div:nth-child(3)" удаляется текст "Пароли не совпадают" (поз.21,22). А затем функцией .css(), примененной к элементу "input[name='client-password_2']" восстанавливается изначальный цвет фона поля повторного ввода (поз.23,24).
Теперь проверим работу скрипта после размещения его в файле "functions.js", находящегося в папке "js" корневого каталога. Для этого откроем страницу "Получить скидку" и попробуем заполнить в форме заказа поля для ввода пароля.
При этом, сначала проверим вариант с неправильно введенным паролем. В этом случае в первом поле используем какую-нибудь комбинацию цифр, допустим, последовательность цифр от 1 до 6. А при повторном вводе преднамеренно сделаем ошибку, например, наберем последовательность "123457", заменив последнюю цифру, как показано на скриншоте.

Рис.2 Отображение ошибки при неправильном вводе пароля
В результате, рядом с полем для повторного ввода появилось оповещение о том, что пароли не совпадают. А в самом поле изменился цвет фона.
Как видно, в этом состоянии скрипт отрабатывает должным образом. А теперь проверим его работу при правильно введенном пароле.
Для этого исправим значение во втором поле, заменив последний символ с цифры 7 на 6. В результате чего, получится правильная комбинация "123456", соответствующая значению в первом поле.
После этого, если скрипт работает нормально, должна будет исчезнуть запись "Пароли не совпадают" и восстановиться первоначальный цвет соответствующего поля, как изображено на следующем скриншоте.

Рис.3 Удаление сообщения об ошибке при правильном вводе пароля
Как видно, скрипт и в этом случае нормально отработал.
Таким образом мы сделали проверку ввода пароля при заполнении полей. Однако, это недостаточно. Так как надо исключить и саму возможность отправки формы при ошибочном вводе.
Выполняем валидацию пароля при отправке формы
В отличии от предыдущей проверки, сейчас задача состоит в том, чтобы создать механизм, который будет выполнять проверку на правильность ввода пароля не в процессе заполнения полей, а в момент отправки формы.
Зто обязательно нужно сделать, даже несмотря на то, что при предыдущей проверке пользователю предоставляется предварительная информация об ошибочном вводе. В таких случаях обычно говорят: "Защита от дурака".
Как и в предыдущем варианте здесь мы также будем использовать библиотеку jQuery. Но теперь составим функцию, которая будет вызываться не обработчиком события JavaScript, а событием самой формы.
В HTML для тега
Таким образом мы создали необходимые инструменты по проверке правильности ввода пароля. После чего можно перейти и к отправке формы. Что мы и сделаем в следующей статье.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:
- Файлы каталога www
- Таблицы базы данных MySQL
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.
С уважением, Николай Гришин
- Следующая сатья: Получаем и проверяем данные из формы в PHP
Комментарии
Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.
Буду Вам за это очень признателен!