Проверка пароля в JavaScript [Пошаговое объяснение установки]

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

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

Проверка пароля в JavaScript гарантирует, что эти параметры соблюдаются, когда пользователь создает пароль. Данные условия должны быть соблюдены для формирования достаточно надежного пароля. Структуру пароля можно проверить с помощью регулярного выражения с использованием кода JavaScript.

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

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

1. Создайте HTML-форму

Форма должна иметь основные поля, такие как электронная почта, номер телефона и пароль. Давайте посмотрим на пример кода HTML для определения структуры формы.

<! ДОКТИП HTML >

< html язык = «ru» >

< голова >

< метакодировка = «UTF-8 » >

< meta name = «viewport» content = «width=device-width, initial-scale=1.0» >

< заголовок > Форма </ заголовок >

</ голова >

< тело >

< класс div = «контейнер» >

< действие формы = «/action_page.php» >

< label for = «usrname» > Адрес электронной почты </ label >

< тип ввода = «текст» id = «имя пользователя» имя = «имя пользователя» требуется >

< label for = «psw» > Пароль </ label >

< тип ввода = «пароль» id = «psw» имя = «psw» шаблон = «(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }» title = «Должно содержать хотя бы одну цифру и одну прописную и строчную буквы, а также не менее 8 или более символов» обязательно >

< тип ввода = «отправить» значение = «отправить » >

</ форма >

</ дел >

< div id = «сообщение» >

< h3 > Пароль должен содержать следующее: </ h3 >

< p id = "letter" class = "invalid" > A < b > нижний регистр </ b > буква </ p >

< p id = «заглавная» class = «недопустимая» > A < b > заглавная (верхняя) </ b > буква </ p >

< p id = «число» class = «недопустимый» > A < b > число </ b ></ p >

< p id = «length» class = «invalid» > Минимум < b > 16 символов </ b ></ p >

</ дел >

</ тело >

</ HTML >

2. Добавьте CSS

ввод {

ширина : 100% ;

отступ : 12 пикселей ;

граница : 1px сплошная #ccc ;

радиус границы : 4px ;

box-sizing : граница-коробка ;

верхнее поле : 6px ;

нижняя граница : 16px ;

}

/* Стиль кнопки отправки */

ввод [ тип = отправить ] {

цвет фона : #4CAF50 ;

цвет : белый ;

}

/* Стиль контейнера для ввода */

.контейнер {

цвет фона : #f1f1f1 ;

отступ : 20 пикселей ;

}

#сообщение {

дисплей : нет ;

фон : #f1f1f1 ;

цвет : #000 ;

должность : родственник ;

отступ : 20 пикселей ;

верхнее поле : 10px ;

}

#сообщение р {

отступ : 10px 35px ;

размер шрифта : 18 пикселей ;

}

.действительный {

цвет : RGB ( 3 , 184 , 190 );

}

.действительно: до {

должность : родственник ;

слева : -35px ;

содержание : «&#10004;» ;

}

.недействительный {

цвет : красный ;

}

.invalid: перед {

должность : родственник ;

слева : -35px ;

содержание : «&#10006;» ;

}

Оформить заказ: лучшие фреймворки Javascript в 2021 году

3. Добавьте JavaScript

вар мой ввод = документ . getElementById ( "psw" );

переменная буква = документ . getElementById ( "буква" );

переменная столица = документ . getElementById ( "заглавная" );

номер переменной = документ . getElementById ( "число" );

переменная длина = документ . getElementById ( «длина» )

мой ввод . onfocus = функция () {

документ . getElementById ( «сообщение» ). стиль . дисплей = «заблокировать» ;

}

мой ввод . размытие = функция () {

документ . getElementById ( «сообщение» ). стиль . дисплей = «нет» ;

}

мой ввод . onkeyup = функция () {

var lowerCaseLetters = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

письмо . список классов . удалить ( «недействительно» );

письмо . список классов . добавить ( «действительно» );

} иначе {

письмо . список классов . удалить ( «действительно» );

письмо . список классов . добавить ( "недействительно" );

}

var upperCaseLetters = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

капитал . список классов . удалить ( «недействительно» );

капитал . список классов . добавить ( «действительно» );

} еще {

капитал . список классов . удалить ( «действительно» );

капитал . список классов . добавить ( "недействительно" );

}

номера переменных = / [ 0-9 ] / г ;

если ( мой ввод . значение . совпадение ( числа )) {

номер . список классов . удалить ( «недействительно» );

номер . список классов . добавить ( «действительно» );

} иначе {

номер . список классов . удалить ( «действительно» );

номер . список классов . добавить ( "недействительно" );

}

если ( myInput . значение . длина >= 8 ) {

длина . список классов . удалить ( «недействительно» );

длина . список классов . добавить ( «действительно» );

} иначе {

длина . список классов . удалить ( «действительно» );

длина . список классов . добавить ( "недействительно" );

}

}

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

4. Регулярные выражения/REGEX

Регулярные выражения — это шаблоны, соответствующие исходной комбинации литералов, переданных в поле. При проверке пароля использование регулярных выражений JavaScript играет важную роль в идентификации строки и того, находится ли она в заданном формате или нет. Регулярные выражения — это объекты JavaScript. Эти регулярные выражения записываются между косыми чертами в коде JavaScript для проверки пароля.

Пример: пусть re=/ac-b/

Как написать проверку пароля в JavaScript, используя регулярное выражение?

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

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

Пример: пусть number=/[0-9]/g. Он принимает числа в диапазоне от 0 до 9.

Оформить заказ: проекты Javascript в Github

Изучайте онлайн-курсы по программному обеспечению от лучших университетов мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.

Заключение

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

Если вам интересно узнать больше о разработке полного стека, ознакомьтесь с программой Executive PG upGrad и IIIT-B по разработке программного обеспечения с полным стеком, которая предназначена для работающих профессионалов и предлагает более 500 часов тщательного обучения, более 9 проектов и заданий. , статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.