Html проверка совпадения пароля

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

Узнать, как создать форму проверки пароля с помощью 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 = /7/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.

Источник

Организовать проверку совпадения паролей в обоих полях и выдать ответ в виде alert() об совпадении и несовпадении

Два поля редактирования, два поля ввода пароля и кнопку. Организовать проверку совпадения паролей в обоих полях и выдать ответ в виде alert() об совпадении и несовпадении. Ввести в два поля названия двух цветов и вывести в новом окне надпись для результирующего цвета (4 примера, для остальных “не знаю”) с соответствующим цветом фона.

Помогите пожалуйста написать скрипт)

Добавлено через 45 минут
Все что получилось

1 2 3 4 5 6 7 8 9 10 11 12 13

HTML> HEAD> TITLE> Javascript. /TITLE> /HEAD> BODY BGCOLOR="green" > FORM> div id="info">/div> label for="first">/label>input type="text" value="">br> label for="second">/label>input type="text" value="">br> button>Кнопка/button> /FORM>

Источник

Проверка совпадения 2-х полей input на jQuery

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

Для чего вам это может понадобиться? Предположим, у вас есть 2 поля – например, поле «Пароль» и поле «Подтверждение пароля». Мы сверяем эти поля и в случае расхождения данных — выводим соответствующее сообщение.

Итак, у нас есть форма с 2-мя полями:

  
Введите пароль:
 Что нам нужно сделать?

1. Проверить совпадение второго поля с первым.
2. Если поля не совпадают, запретить отправку формы + вывод соответствующего сообщения.

Для решения этих задач воспользуйтесь следующим скриптом:

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

Источник

How TO — Password Validation

Learn how to create a password validation form with CSS and JavaScript.

Password Validation

Create A Password Validation Form

Step 1) Add HTML:

Example

Password
< input type="password" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])." title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>

Note: We use the pattern attribute (with a regular expression) inside the password field to set a restriction for submitting the form: it must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter.

Step 2) Add CSS:

Style the input fields and the message box:

Example

/* Style all input fields */
input width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
>

/* Style the submit button */
input[type=submit] background-color: #04AA6D;
color: white;
>

/* Style the container for inputs */
.container background-color: #f1f1f1;
padding: 20px;
>

/* The message box is shown when the user clicks on the password field */
#message display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
>

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

/* Add a green text color and a checkmark when the requirements are right */
.valid color: green;
>

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

/* Add a red text color and an «x» icon when the requirements are wrong */
.invalid color: red;
>

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

Step 3) Add JavaScript:

Example

// When the user clicks on the password field, show the message box
myInput.onfocus = function() document.getElementById(«message»).style.display = «block»;
>

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() document.getElementById(«message»).style.display = «none»;
>

// When the user starts to type something inside the password field
myInput.onkeyup = function() // Validate lowercase letters
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»);
>

// Validate capital letters
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»);
>

// Validate numbers
var numbers = /1/g;
if(myInput.value.match(numbers)) <
number.classList.remove(«invalid»);
number.classList.add(«valid»);
> else number.classList.remove(«valid»);
number.classList.add(«invalid»);
>

// Validate length
if(myInput.value.length >= 8) length.classList.remove(«invalid»);
length.classList.add(«valid»);
> else length.classList.remove(«valid»);
length.classList.add(«invalid»);
>
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Источник