×

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

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

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

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Формы → Проверяем правильность ввода пароля


Автор: / Дата:

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

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

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

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

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

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

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

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

Содержание


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

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


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

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

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

  1. //---------Проверка комбинаций символов при вводе пароля------------

  2. $("input[type='password']").keyup(function() {

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

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

  5. if (password_1 != password_2 && password_1 != "" && password_2 != "") {

  6. if (!$("div").is(".password_2 div:nth-child(3)")) {

  7. $(".password_2")

  8. .append('<div>Пароли не совпадают</div>');

  9. }

  10. else {

  11. var text = $(".password_2 div:nth-child(3)").text();

  12. if (text == "") {

  13. $(".password_2 div:nth-child(3)")

  14. .text('Пароли не совпадают');

  15. }

  16. }

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

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

  19. }

  20. else {

  21. $(".password_2 div:nth-child(3)")

  22. .empty();

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

  24. .css("background", "#fdfadc");

  25. }

  26. });

Рис.1 Скрипт проверки комбинаций символов при вводе пароля

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

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

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

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

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

Так, в случае, если в изначальном состоянии в контейнере с классом "password_2" будет отсутствовать 3-тий по порядку блочный элемент <div> (поз.6), то с помощью метода .append() в конец этого контейнера будет добавлен элемент <div> с содержимом в виде текста "Пароли не совпадают" (поз.7.8). Что будет оповещать пользователя о несоответствии набранных значений.

Если же в контейнере с классом "password_2" уже будет находиться третий элемент <div>, то сначала с помощью функции .text() будет определено его содержимое (поз.11). И в случае пустого значения соответствующей переменной text, в блок <div> добавится текст "Пароли не совпадают" (поз.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 для тега <form> существует атрибут события onsubmit, с помощью которого при нажатии на кнопку submit можно вызвать скрипт с указанным именем.

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

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

  1. <form 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" тега <form> указан символ решетки (#).


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

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


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

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

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

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

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

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


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments