Проверяем правильность ввода пароля

Здравствуйте, уважаемый посетитель!

Сегодня создадим дополнительные инструменты проверки правильности ввода пароля. Ведь людям свойственно ошибаться, и очевидно, что такое может случаться и при заполнении таких полей.

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

В предыдущей статье, используя регулярное выражение в атрибуте pattern, мы уже обеспечили корректность ввода для поля "Пароль" в соответствии с шаблоном. Который допускает ввод только цифр и букв латинского алфавита в количестве не менее 6-ти.

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

В первом случае будут проверяться значения полей в ходе их заполнения. Что позволит пользователю контролировать корректность ввода комбинаций символов до отправки формы.

На втором этапе будет осуществляться валидация пароля в момент отправки формы. И в случае несоответствия, форма будет блокироваться с выводом сообщения об ошибке.

• Проверяем правильность ввода пароля при заполнении полей
• Выполняем валидацию пароля при отправке формы
• Исходные файлы сайта

Для создания инструмента такой проверки воспользуемся библиотекой jQuery. Это позволит составить нужный скрипт со значительно меньшим объемом кода в сравнении, если для этого использовать чистый JavaScript.

При этом для вызова события применим обработчик возвращения клавиши клавиатуры из нажатого в не нажатое состояние .keyup(). Данный метод вполне подойдет для нашего случая, обеспечив таким образом проверку на соответствие введенных комбинаций символов каждый раз после ввода с клавиатуры нового значения.

Код такого скрипта приведен в следующей таблице.

Как выше было отмечено, для выполнения скрипта здесь используется обработчик события .keyup()). Причем, этот метод будет выполняться только при изменении значений в полях, предназначенных для ввода пароля, обозначенных как "input[type='password']" (поз.2).

Таким образом, после каждого ввода с клавиатуры нового символа будет выполняться проверка на соответствие значений полей. И если введенные комбинации символов будут неодинаковы, то рядом с полем повторного ввода будет возникать соответствующая запись. А дополнительно к этому, будет меняться также и цвет фона поля.

Выполняться это следующим образом.

В качестве проверяемых значений здесь назначены две переменные: "password_1" для первого поля (поз.3) и, соотвественно, "password_2"- для повторного ввода (поз.4).

А далее, с помощью условного оператора, при непустых значениях этих переменных и их неравенстве (поз.5) будут выполняться действия, соответствующие такому состоянию.

Так, в случае, если в изначальном состоянии в контейнере с классом "password_2" будет отсутствовать 3-тий по порядку блочный элемент

(поз.6), то с помощью метода .append() в конец этого контейнера будет добавлен элемент

с содержимым в виде текста "Пароли не совпадают" (поз.7.8). Что будет оповещать пользователя о несоответствии набранных значений.

Если же в контейнере с классом "password_2" уже будет находиться третий элемент

, то сначала с помощью функции .text() будет определено его содержимое (поз.11). И в случае пустого значения соответствующей переменной text, в блок

добавится текст "Пароли не совпадают" (поз.13,14). Если же такой текст уже содержится, никаких добавлений не произойдет.

И последнее, что произойдет при несовпадении паролей, это изменение цвета фона поля, предназначенного для повторного ввода. В этом случае для элемента "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 для тега

существует атрибут события onsubmit, с помощью которого при нажатии на кнопку submit можно вызвать скрипт с указанным именем.

Причем, если перед именем скрипта добавить "return", то в случае возврата из функции значения false отправка формы остановиться.

Таким образом, добавим в нашу форму атрибут onsubmit с указанием названия вызываемой функции валидации пароля, как показано ниже.

1. name="righting" action="#" method="post" onsubmit="return checkRiting()">

Рис.4 Добавление в форму атрибута onsubmit

А теперь перейдем к составлению самой функции, которая будет производить проверку при отправке формы. Код этой функции довольно простой и в какой-то степени аналогичен предыдущему скрипту.

1. //---------функция валидации пароля------------

2. function checkRiting() {

3. var password_1 = $("input[name='client-password_1']").val();

4. var password_2 = $("input[name='client-password_2']").val();

5. var bad = "";

6. if (password_2 == "") {

7. bad = "Пароль не подтвержден. Пожалуйста, повторите ввод пароля";

8. }

9. else {

10. if (password_1 != password_2) {

11. bad = "В полях 'Пароль' комбинации символов не совпадают";

12. }

13. }

14. if (bad != "") {

15. $("input[name='client-password_2']")

16. .css("background", "#ffcab2");

17. alert(bad);

18. return false;

19. }

20. }

Рис.5 Функция валидации пароля

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

Так при пустом значении переменной "password_2", в переменной "bad" будет сохранен текст ошибки "Пароль не подтвержден. Пожалуйста, повторите ввод пароля" (поз.7). А в случае, если значения в "password_1" и "password_2" не будут совпадать, то в "bad" будет записан текст "В полях 'Пароль' комбинации символов не совпадают".

В итоге, если пароль введен не правильно, то переменная "bad" окажется не с пустым значением (поз.14), и следовательно, произойдет окрашивание поля для повторного ввода пароля (поз.15,16), вызов метода alert для вывода на экран пользователя предупреждающего диалогового окна с сообщением об ошибке (поз.17) и возврат функцией значения "false" (поз.18).

При этом значение функции "false" приведет к тому, что оправка формы будет остановлена, а вызов метода alert обеспечит вывод браузером на экран сообщения в соответствием со значением переменной "bad".

В случае, если переменная "bad" останется с пустым значением, т.е. при правильном вводе, то возврата "false" из функции не будет. И следовательно, не будет и блокировки отправки формы.

Теперь добавим этот код непосредственно в файл "functions.js" и проверим оправку формы при неправильно введенном пароле.

Для этого сначала заполним все поля формы онлайн заказа за исключением поля, в котором необходимо подтвердить пароль. И попробуем отправить форму.

Рис.5 Отправка формы без подтверждения пароля

Как видно, в этом состоянии форма не отправлена с выводом соответствующего сообщения.

А теперь введем повторный пароль с ошибкой, подобно тому, как мы это делали ранее (рис.2).

Рис.6 Отправка формы при неправильном вводе пароля

И в этом случае валидация пароля прошла успешно - форма не отправлена с сообщением о том, что комбинации символов не совпадают.

Если же теперь попытаться отправить форму при правильно введенном пароле, то можно убедиться в ее отправке. В этом случае текущая страница просто перегрузится. Так как на данный момент в атрибуте "href" тега указан символ решетки (#).

---

Таким образом мы создали необходимые инструменты по проверке правильности ввода пароля. После чего можно перейти и к отправке формы. Что мы и сделаем в следующей статье.

Исходные файлы сайта

---

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

• Файлы каталога www
• Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

В начало

С уважением, Николай Гришин

---

• Следующая сатья: Получаем и проверяем данные из формы в PHP