Html как сделать проверку пароля c

Как сделать проверку совпадение паролей form html в js

Как сделать проверку совпадение паролей form html в js? Где я ввожу все, и по итогу проверит проверит совпадение двух паролей, при не совпадении вернет назад html экран и не отправит на БД?

Отслеживать
задан 7 ноя 2022 в 16:51
1 1 1 бронзовый знак
Детализируйет ваш вопрос. Из него не понятно, что вам и где надо проврять
7 ноя 2022 в 19:18

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

С помощью js этого сделать нельзя, нужно работать с php. создаёте php файл, в form указываете

в самом .php файле подключаетесь к БД (в моём случае это MySQL)

$host = ''; $userdb = ''; $passdb = ''; $db_name = ''; $link = mysqli_connect($host, $userdb, $passdb, $db_name); 

далее мы получаем логин и пароль из базы

$password_query = mysqli_query($link, 'SELECT pass FROM `users`'); //здесь нужны ваши знания mysql $login_query = mysqli_query($link, 'SELECT username FROM `users`'); //здесь нужны ваши знания mysql чтобы получить данные из БД $password_fetch = mysqli_fetch_array($password_query); $login_fetch = mysqli_fetch_array($login_query); $password = $password_fetch['pass']; $login = $login_fetch['username']; 

получаем введённые в форму данные

$inputlogin = $_POST['login']; $inputpassword = $_POST['password']; 

проверяем данные из формы с данными из БД

if ($inputpassword === $password) < if ($inputlogin === $login) < header('Location: '); //куда будет идти переадресация, если данные введены верно exit(); >> else < header('Location: index.html'); //(страница с формой авторизации) если введены неверно exit(); >

так-же советую почитать про $_SESSION, если хотите сделать форму авторизации, а ещё вот пример использования сессий

Html как сделать проверку пароля c

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

Примечание: Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему — см. Небезопасные пароли (en-US) . Другие браузеры также реализуют аналогичные механизмы.

Значения

Атрибут value содержит DOMString , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку ( «» ). Если указано свойство required , то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.

Если указан атрибут pattern , содержимое элемента управления «password» считается действительным только в том случае, если значение проходит проверку; см. Validation для получения дополнительной информации.

Примечание: Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля «password» . При вставке пароля, возвращаемые символы удаляются из значения.

Использование полей ввода пароля

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

Простое поле ввода пароля

Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента .

label for="userPassword">Пароль:label> input id="userPassword" type="password" /> 

Поддержка автозаполнения

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

Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование «current-password» или «new-password» .

Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.

Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем «on» , так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.

Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».

label for="userPassword">Пароль:label> input id="userPassword" type="password" autocomplete="current-password" /> 

Обязательное заполнение пароля

Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут required .

label for="userPassword">Пароль:label> input id="userPassword" type="password" required /> 

Указание режима ввода

Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут inputmode для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

label for="pin">ПИН:label> input id="pin" type="password" inputmode="numeric" /> 

Настройка длины пароля

Как обычно, вы можете использовать атрибуты minlength и maxlength , чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут size используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

label for="pin">ПИН:label> input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8" /> 

Выделение текста

Как и другие элементы управления текстовой записью, вы можете использовать метод select() (en-US) для выбора всего текста в поле пароля.

HTML

label for="userPassword">Парольlabel> input id="userPassword" type="password" size="12" /> button id="selectAll">Выделить всеbutton> 

JavaScript

.getElementById("selectAll").onclick = function (event)  document.getElementById("userPassword").select(); >; 

Результат

Вы также можете использовать selectionStart и selectionEnd , чтобы получить (или установить), какой диапазон символов в элементе управления, и selectionDirection , чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.

Валидация

Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введённого пароля, вы можете использовать атрибут pattern , чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.

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

label for="hexId">Hex ID:label> input id="hexId" type="password" pattern="[0-9a-fA-F]" title="Enter an ID consisting of 4-8 hexadecimal digits" /> 

Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.

Примеры

Запрос номера социального страхования

В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединённых Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.

HTML

label for="ssn">SSN:label> input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d" required autocomplete="off" /> br /> label for="ssn">Value:label> span id="current">span> 

Здесь используется pattern , который ограничивает введённое значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире («-«) или ничем.

В inputmode установлено значение «number» , чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов minlength и maxlength установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут required используется для указания того, что этот элемент управления должен иметь значение. Наконец, autocomplete установлен «off» , чтобы избежать попыток установить пароли менеджеров паролей.

JavaScript

var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); ssn.oninput = function (event)  current.innerHTML = ssn.value; >; 

Как сделать — Проверку пароля

Узнать, как создать форму проверки пароля с помощью CSS и JavaScript.

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

Создание формы проверки пароля

Шаг 1) Добавить HTML:

Пример

Пароль
» title=»Должно содержать по крайней мере одно число, одну заглавную и строчную буквы, а также не менее 8 и более символов» required>

Примечание: Мы используем атрибут pattern (с регулярным выражением) внутри поля password, чтобы установить ограничение для отправки формы: она должна содержать 8 или более символов, которые имеют по крайней мере одно число, а также одну прописную и строчную букву.

Шаг 2) Добавить CSS:

Style the input fields and the message box:

Пример

/* Стиль всех полей ввода */
input <
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
>

/* Стиль кнопки «Отправить» */
input[type=submit] <
background-color: #4CAF50;
color: white;
>

/* Стиль контейнера для входных данных */
.container <
background-color: #f1f1f1;
padding: 20px;
>

/* Окно сообщения отображается, когда пользователь нажимает на поле пароля */
#message <
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
>

#message p <
padding: 10px 35px;
font-size: 18px;
>

/* Добавить зеленый цвет текста и галочка, когда требования верны */
.valid <
color: green;
>

.valid:before <
position: relative;
left: -35px;
content: «✔»;
>

/* Добавить красный цвет текста и собой «x» и значок, когда требования не правы */
.invalid <
color: red;
>

.invalid:before <
position: relative;
left: -35px;
content: «✖»;
>

Шаг 3) Добавить JavaScript:

Пример

// Когда пользователь нажимает на поле Пароль, отображается окно сообщения
myInput.onfocus = function() <
document.getElementById(«message»).style.display = «block»;
>

// Когда пользователь щелкает за пределами поля пароля, скрыть окно сообщения
myInput.onblur = function() <
document.getElementById(«message»).style.display = «none»;
>

// Когда пользователь начинает вводить что-то в поле пароля
myInput.onkeyup = function() <
// Проверка строчных букв
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) <
letter.classList.remove(«invalid»);
letter.classList.add(«valid»);
> else <
letter.classList.remove(«valid»);
letter.classList.add(«invalid»);
>

// Проверка заглавных букв
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) <
capital.classList.remove(«invalid»);
capital.classList.add(«valid»);
> else <
capital.classList.remove(«valid»);
capital.classList.add(«invalid»);
>

// Проверка чисел
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) <
number.classList.remove(«invalid»);
number.classList.add(«valid»);
> else <
number.classList.remove(«valid»);
number.classList.add(«invalid»);
>

// Проверить длину
if(myInput.value.length >= 8) <
length.classList.remove(«invalid»);
length.classList.add(«valid»);
> else <
length.classList.remove(«valid»);
length.classList.add(«invalid»);
>
>

Совет: Зайдите на наш учебник HTML Форм чтобы узнать больше о формах HTML.

Форма с проверкой пароля

Здесь вы узнаете, как сделать форму с проверкой пароля при помощи CSS и JavaScript.

Как сделать форму с проверкой пароля

Шаг 1) Добавляем HTML:

  
 Логин Пароль " title="Должен содержать по меньшей мере одну цифру, одну большую и одну маленькую буквы латинского алфавита и быть в длину не менее 8 символов" required>
 
Пароль должен содержать:
 
Маленькую букву
 
Заглавную (большую) букву
 
Цифру
 
Минимум 8 символов
 
 

Внимание! Мы используем атрибут pattern (с регулярным выражением) в поле ввода пароля, чтобы задать ограничение на ввод: это должно быть 8 или более символов, среди которых есть по меньшей мере одна цифра, одна большая и одна маленькая буква латинского алфавита.

Шаг 2) Добавляем CSS:

Задаем стили для полей ввода и области сообщений:

 /* Стиль всех полей ввода */ input < width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; >/* Стиль кнопки отправки формы */ input[type=submit] < background-color: #04AA6D; color: white; >/* Стиль контейнера для полей ввода */ .container < background-color: #f1f1f1; padding: 20px; >/* Область сообщений появляется, когда пользователь кликает в поле ввода пароля */ #message < display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; >#message p < padding: 10px 35px; font-size: 18px; >/* Добавляем зеленый цвет и галочку, когда требование выполнено */ .valid < color: green; >.valid:before < position: relative; left: -35px; content: "✔"; >/* Добавляем красный цвет и крест, когда требование не выполнено */ .invalid < color: red; >.invalid:before

Шаг 3) Добавляем JavaScript:

 var myInput = document.getElementById("psw"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var length = document.getElementById("length"); // Когда пользователь кликает в поле ввода пароля, выводим область сообщений myInput.onfocus = function() < document.getElementById("message").style.display = "block"; >// Когда пользователь кликает вне поля ввода пароля, скрываем область сообщений myInput.onblur = function() < document.getElementById("message").style.display = "none"; >// Когда пользователь начинает что-то печатать в поле ввода пароля myInput.onkeyup = function() < // Проверяем на маленькие буквы var lowerCaseLetters = /[a-z]/g; if(myInput.value.match(lowerCaseLetters)) < letter.classList.remove("invalid"); letter.classList.add("valid"); >else < letter.classList.remove("valid"); letter.classList.add("invalid"); >// Проверяем на заглавные буквы var upperCaseLetters = /[A-Z]/g; if(myInput.value.match(upperCaseLetters)) < capital.classList.remove("invalid"); capital.classList.add("valid"); >else < capital.classList.remove("valid"); capital.classList.add("invalid"); >// Проверяем на цифры var numbers = /[0-9]/g; if(myInput.value.match(numbers)) < number.classList.remove("invalid"); number.classList.add("valid"); >else < number.classList.remove("valid"); number.classList.add("invalid"); >// Проверяем длину if(myInput.value.length >= 8) < length.classList.remove("invalid"); length.classList.add("valid"); >else < length.classList.remove("valid"); length.classList.add("invalid"); >>