Многие веб-сайты, которые требуют учётные данные для логина, соблюдают параметры безопасности, часто называемые «требования комплексного пароля». Эти требования гарантируют, что пароли пользователей достаточно сильны и не могут быть легко взломаны.
Что представляет собой надёжный пароль? Ну, это зависит от того, кого вы спрашиваете. Тем не менее, традиционные факторы, которые способствуют надёжности пароля, включают в себя его длину, сложность и непредсказуемость. Для обеспечения надёжности пароля, многие веб-сайты требуют чтобы пароли пользователей были буквенно-цифровые в дополнение к определённой длине.
В этом уроке мы будем строить форму, которая будет давать пользователю живой фидбэк по поводу достижения их пароля требований комплексности, которую мы будем устанавливать.
Прежде чем мы начнём, давайте взглянем на то, как будет выглядеть наш конечный продукт.
Пожалуйста, обратите внимание, что целью этого урока является демонстрация, как простой скрипт может быть написан с использованием JavaScript и jQuery для соблюдения требований комплексного пароля.
Шаг№1: Стартовый HTML
Сначала нам нужно написать базовый HTML код для формы:
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Проверка пароля</title>
</head>
<body>
<div id="container">
<!-- Форма HTML Здесь -->
</div>
</body>
</html>
|
Шаг№2: HTML форма
Теперь давайте добавим разметку, которая будет использована для нашей формы. Мы будем заворачивать элементы нашей формы в ul & li списки для лучшей структуры и организации.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<h1>Проверка пароля</h1>
<form>
<ul>
<li>
<label for="username">Имя пользователя:</label>
<span><input id="username" name="username" type="text" /></span>
</li>
<li>
<label for="pswd">Пароль:</label>
<span><input id="pswd" type="password" name="pswd" /></span>
</li>
<li>
<button type="submit">Отправить</button>
</li>
</ul>
</form>
|
Вот объяснение кода, который мы использовали:
«span» элементы – они будут использованы для визуального стиля наших элементов ввода (вы увидите это позже в CSS)
type=”password” – это HTML5 атрибут для элементов формы. В поддерживаемых браузерах, символы в этой области будут заменены на чёрные точки, таким образом, скрывая фактический пароль на экране.
Шаг№3: HTML информационное окно о пароле
Теперь давайте добавим HTML, который будет информировать пользователя о том, какие требованиям сложности пароля были выполнены, а какие нет. Это окно будет скрыто по умолчанию и будет появляться только тогда, когда поле “Пароль” находится в фокусе.
|
1
2
3
4
5
6
7
8
9
|
<div id="pswd_info">
<h4>Пароль должен соответствовать критериям:</h4>
<ul>
<li id="letter">Минимум <strong>одна буква</strong></li>
<li id="capital">Минимум <strong>одна заглавная буква</strong></li>
<li id="number">Минимум <strong>одна цифра</strong></li>
<li id="length">Быть не менее <strong>8 символов</strong></li>
</ul>
</div>
|
Каждому элементу списка задаётся определённый ID атрибут. Эти идентификаторы будут использоваться для указания каждого комплексного требования, а также показывать пользователю, если требование было выполнено или нет. Кроме того, каждый элемент будет оформлен в стиле “valid”, если пароль пользователя соответствует требованием или “invalid”, если они не соответствует (если поле ввода пустое, то тогда ни одно из требований не было выполнено, поэтому по умолчанию класс “invalid”).
Вот что у нас есть на данный момент:
Шаг№4: Оформление CSS и бэкграунд
Мы собираемся придать элементам нашей страницы основной стиль. Вот краткий обзор того, что мы будем делать в нашем CSS:
- Добавить цвет фона – я использовал # EDF1F4
- Добавить фоновое изображение с текстурой (созданное в Photoshop)
- Установить шрифт
- Удалить / изменить некоторые браузеры по умолчанию
|
1
2
3
4
5
6
7
8
9
10
11
|
body {
background:#edf1f4 url(bg.jpg);
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
font-size:16px;
color:#444;
}
ul, li {
margin:0;
padding:0;
list-style-type:none;
}
|
Шаг№5: Оформляем заголовок
Теперь мы будем стилизовать наш основной контейнер и централизуем его на странице. Мы также применим стиль к нашему H1 тэгу.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#container {
width:400px;
padding:0px;
background:#fefefe;
margin:0 auto;
border:1px solid #c4cddb;
border-top-color:#d3dbde;
border-bottom-color:#bfc9dc;
box-shadow:0 1px 1px #ccc;
border-radius:5px;
position:relative;
}
h1 {
margin:0;
padding:10px 0;
font-size:24px;
text-align:center;
background:#eff4f7;
border-bottom:1px solid #dde0e7;
box-shadow:0 -1px 0 #fff inset;
border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
text-shadow:1px 1px 0 #fff;
}
|
Важно отметить, что мы должны дать нашему H1 заголовку границу радиуса на двух верхних углах. Если мы не сделаем этого, цвет H1 фона будет перекрываться закруглёнными углами из его родительского элемента (# container).
Добавление границ радиуса (border-radius) к элементу H1 гарантирует, что наши верхние углы останутся округлёнными.
Шаг№6: CSS стили для формы
Теперь давайте стилизовать различные элементы нашей формы, начиная со списка элементов внутри формы:
|
1
2
3
4
5
6
|
form ul li {
margin:10px 20px;
}
form ul li:last-child {
text-align:center;
margin:20px 0 25px 0;}
|
Мы использовали :last-child селектор для выбора последнего пункта в списке (кнопка) и дали ему немного дополнительного расстояния. (Обратите внимание, этот селектор не поддерживается в некоторых старых браузерах). Далее, давайте стилизовать элементы ввода:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
input {
padding:10px 10px;
border:1px solid #d5d9da;
border-radius:5px;
box-shadow: 0 0 5px #e8e9eb inset;
width:328px; /* 400 (#container) - 40 (li margins) - 10 (span paddings) - 20 (input paddings) - 2 (input borders) */
font-size:1em;
outline:0; /* remove webkit focus styles */
}
input:focus {
border:1px solid #b9d4e9;
border-top-color:#b6d5ea;
border-bottom-color:#b8d4ea;
box-shadow:0 0 5px #b9d4e9;}
label {
color:#555;
}
#container span {
background:#f6f6f6;
padding:3px 5px;
display:block;
border-radius:5px;
margin-top:5px;
}
|
Шаг№7: Стиль кнопок
Теперь мы собираемся стилизовать наши кнопки. Мы будем использовать несколько стилей CSS3, чтобы пользователи с новыми браузерами получали наилучший визуальный эффект.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
button {
background: #57a9eb; /* Old browsers */
background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
border:1px solid #326fa9;
border-top-color:#3e80b1;
border-bottom-color:#1e549d;
color:#fff;
text-shadow:0 1px 0 #1e3c5e;
font-size:.875em;
padding:8px 15px;
width:150px;
border-radius:20px;
box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
background: #3a76c4; /* Old browsers */
background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
box-shadow:none;
text-shadow:0 -1px 0 #1e3c5e;
}
|
Шаг№8: Окно пароля
Теперь мы собираемся стилизовать окно, которое информирует пользователей, если они удовлетворили требования к паролю. Во-первых, мы будем стилизовать содержащий элемент (#pswd_info).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#pswd_info {
position:absolute;
bottom:-80px;
bottom: -115px9; /* IE Specific */
right:55px;
width:250px;
padding:15px;
background:#fefefe;
font-size:.875em;
border-radius:5px;
box-shadow:0 1px 3px #ccc;
border:1px solid #ddd;
}
|
Давайте добавим немного стиля к H4 элементу:
|
1
2
3
4
5
|
#pswd_info h4 {
margin:0 0 10px 0;
padding:0;
font-weight:normal;
}
|
Наконец, мы будем использовать CSS ::before селектор, чтобы добавить “вверх, указывающий треугольник”. Это геометрический символ, который может быть вставлен, используя его соответствующим UNICODE объект. Как правило, в HTML можно использовать HTML объекты (▲). Однако, поскольку мы добавляем его в CSS, мы должны использовать UNICODE значение (25B2) предшествующие косой чертой.
|
1
2
3
4
5
6
7
8
9
10
11
|
#pswd_info::before {
content: "25B2";
position:absolute;
top:-12px;
left:45%;
font-size:14px;
line-height:14px;
color:#ddd;
text-shadow:none;
display:block;
}
|
Теперь у нас получилось это:
Шаг№9: Valid and invalid
Давайте добавим немного стиля к нашим требованиям. Если требование было выполнено, мы дадим ему класс “valid”. Если требование не было выполнено, оно получит класса “invalid” (класс по умолчанию). Что касается иконок, я использую две 16 × 16 пикселей иконки из Silk Icon Set.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.invalid {
background:url(../images/invalid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#ec3f41;
}
.valid {
background:url(../images/valid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#3a7d34;
}
|
Потому что мы не включили функциональность JavaScript, которая будет динамично менять ” valid” и “invalid” классы, все требования, на данный момент будут отображаться как invalid (мы изменим это позже). Вот что мы имеем на данный момент:
Теперь, когда у нас есть все желаемые стили, мы собираемся скрыть окно пароля. Мы будем переключать его видимость для пользователя с помощью JavaScript. Поэтому давайте добавим следующее правило:
|
1
2
3
|
#pswd_info {
display:none;
}
|
Шаг№10: Анализ проекта
Вот то, что мы хотим достичь в нашем сценарии:
- Когда поле пароля выбрано (:focus), его надо показать.
- Каждый раз, когда пользователь вводит новый символ в поле пароля, надо проверить и посмотреть, если этот символ соответствует одному из следующих правил сложности пароля:
- Хотя бы одна буква
- Хотя бы одна заглавная буква
- Хотя бы одна цифра
- Минимум восемь символов
- Если это произойдет, отметим это правило как “valid”
- Если этоне произойдет, отметим это правило как “invalid”
- Когда поле пароля не выбрано (‘:blur’), тогда нужно скрыть его
Шаг№11: Установка jQuery
Во-первых, мы должны добавить jQuery на нашу страницу. Мы будем использовать хостинговую версию. Нам также нужно привязать наш “script.js” файл, в котором мы будем писать код, необходимый для нашей тестовой проверки пароля. Добавляем следующие строки в ваш тег <head>:
|
1
2
|
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="script.js"></script>
|
В нашем “script.js” файле, мы начнём с основного JQuery стартового кода для нашего скрипта:
|
1
2
3
|
$(document).ready(function() {
//code here
});
|
Шаг№12: Настройка триггеров событий
По существу, у нас есть три события, которые мы будет “слушать”:
- “KeyUp” на поле ввода пароля (срабатывает всякий раз, когда пользователь нажимает клавишу на клавиатуре)
- “Focus” на поле ввода пароля (срабатывает всякий раз, когда поле пароля выбирается пользователем)
- “Blur” на поле ввода пароля (срабатывает всякий раз, когда поле пароля не выбрано)
Как вы видете, все события, которые мы слушаем, находятся на поле ввода пароля. В этом примере мы выберем все поля ввода, где тип равен паролю. JQuery также позволяет нам соединить все эти события, а не вводить каждое из них отдельно. Например, вместо того чтоб набирать следующее:
|
1
2
3
4
5
6
7
8
9
|
$('input[type=password]').keyup(function() {
// keyup event code here
});
$('input[type=password]').focus(function() {
// focus code here
});
$('input[type=password]').blur(function() {
// blur code here
});
|
Мы можем соединить все события и написать это:
|
1
2
3
4
5
6
7
|
$('input[type=password]').keyup(function() {
// keyup code here
}).focus(function() {
// focus code here
}).blur(function() {
// blur code here
});
|
Итак, с этим знанием, давайте создадим наш код, который будет отображать или скрывать наше информационное окно пароля в зависимости от того, если поле ввода пароля выбирается пользователем или нет:
|
1
2
3
4
5
6
7
|
$('input[type=password]').keyup(function() {
// keyup code here
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
|
Теперь вы заметите, что, перейдя в поле ввода пароля, поле с информацией о пароле будет видно. Кроме того, щелкнув за пределами поля ввода пароля, в поле пароля информация будет скрыта.
Шаг№13: Проверка сложности правил
Все, что нам нужно сделать, это дать задание скрипту проверять значение в поле пароля каждый раз, когда вводиться новый символ(с помощью события “KeyUp). Таким образом, внутри $ (‘input [type = password]‘).keyup функции мы добавим следующий код:
|
1
2
|
// set password variable
var pswd = $(this).val();
|
Это создает переменную с именем “pswd”, что сохраняет текущее значение поля пароль каждый раз, когда происходит событие KeyUp. Мы будем использовать это значение в проверке каждого из наших правил сложности.
Проверка длины
Теперь, внутри функции KeyUp, давайте добавим следующее:
|
1
2
3
4
5
6
|
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
|
Это проверяет длинну текущего значение пароля на 8 символов. Если значение меньше 8, оно получит “invalid” класс. Если длина больше, чем 8 символов, она получает “valid” класс.
Проверка с помощью обычных выражений. Как вы видели выше, у нас есть if/else заявление, которое тестирует, чтобы убедиться, что требование сложности было выполнено. Если требование сложности удовлетворены, мы даём его ID в поле пароля класс “valid”. Если оно не выполняется, он получает класс “invalid”. Наши остальные требования потребуют использования обычных выражений для проверки сложности правил. Итак, давайте добавим следующее:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/[0-9]/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
|
Вот объяснение трёх if/else заявления, которые мы использовали:
[A-z]
Это выражение проверяет, чтобы убедиться, что по крайней мере одна буква от А до Z (большая) или a до z (маленькая) были введены
[A-Z]
Это выражение проверяет, чтобы убедиться, что по крайней мере одна заглавная буква была введена
[0-9]
Это будет производить проверку на любые цифры от 0 до 9
Шаг№14: Готовый код
Сначала весь HTML и СSS. Для демонстрации я оставил код здесь, но лучше выносить весь CSS в отдельный файл:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background:#edf1f4 url(bg.jpg);
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
font-size:16px;
color:#444;
}
ul, li {
margin:0;
padding:0;
list-style-type:none;
}
#container {
width:400px;
padding:0px;
background:#fefefe;
margin:0 auto;
border:1px solid #c4cddb;
border-top-color:#d3dbde;
border-bottom-color:#bfc9dc;
box-shadow:0 1px 1px #ccc;
border-radius:5px;
position:relative;
}
h1 {
margin:0;
padding:10px 0;
font-size:24px;
text-align:center;
background:#eff4f7;
border-bottom:1px solid #dde0e7;
box-shadow:0 -1px 0 #fff inset;
border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
text-shadow:1px 1px 0 #fff;
}
form ul li {
margin:10px 20px;
}
form ul li:last-child {
text-align:center;
margin:20px 0 25px 0;}
input {
padding:10px 10px;
border:1px solid #d5d9da;
border-radius:5px;
box-shadow: 0 0 5px #e8e9eb inset;
width:328px; /* 400 (#container) - 40 (li margins) - 10 (span paddings) - 20 (input paddings) - 2 (input borders) */
font-size:1em;
outline:0; /* remove webkit focus styles */
}
input:focus {
border:1px solid #b9d4e9;
border-top-color:#b6d5ea;
border-bottom-color:#b8d4ea;
box-shadow:0 0 5px #b9d4e9;}
label {
color:#555;
}
#container span {
background:#f6f6f6;
padding:3px 5px;
display:block;
border-radius:5px;
margin-top:5px;
}
button {
background: #57a9eb; /* Old browsers */
background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
border:1px solid #326fa9;
border-top-color:#3e80b1;
border-bottom-color:#1e549d;
color:#fff;
text-shadow:0 1px 0 #1e3c5e;
font-size:.875em;
padding:8px 15px;
width:150px;
border-radius:20px;
box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
background: #3a76c4; /* Old browsers */
background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
box-shadow:none;
text-shadow:0 -1px 0 #1e3c5e;
}
#pswd_info {
position:absolute;
bottom:-80px;
bottom: -115px9; /* IE Specific */
right:55px;
width:250px;
padding:15px;
background:#fefefe;
font-size:.875em;
border-radius:5px;
box-shadow:0 1px 3px #ccc;
border:1px solid #ddd;
}
#pswd_info h4 {
margin:0 0 10px 0;
padding:0;
font-weight:normal;
}
#pswd_info::before {
content: "\25B2";
position:absolute;
top:-12px;
left:45%;
font-size:14px;
line-height:14px;
color:#ddd;
text-shadow: none;
display:block;
}
.invalid {
background:url(../images/invalid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#ec3f41;
}
.valid {
background:url(../images/valid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#3a7d34;
}
#pswd_info {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="jquerypasswordscript.js"></script>
</head>
<body>
<div id="container">
<h1>Проверка пароля</h1>
<form>
<ul>
<li>
<label for="username">Имя пользователя:</label>
<span><input id="username" name="username" type="text" /></span>
</li>
<li>
<label for="pswd">Пароль:</label>
<span><input id="pswd" type="password" name="pswd" /></span>
</li>
<li>
<button type="submit">Отправить</button>
</li>
</ul>
</form>
<div id="pswd_info">
<h4>Пароль должен соответствовать критериям:</h4>
<ul>
<li id="letter">Минимум <strong>одна буква</strong></li>
<li id="capital">Минимум <strong>одна заглавная буква</strong></li>
<li id="number">Минимум <strong>одна цифра</strong></li>
<li id="length">Быть не менее <strong>8 символов</strong></li>
</ul>
</div>
</div>
</body>
</html>
|
А вот и наш jquerypasswordscript.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
$(document).ready(function() {
$('input[type=password]').keyup(function() {
// set password variable
var pswd = $(this).val();
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/[0-9]/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
|
Шаг№14: Тестирование
Вот и все, что нужно сделать! Вы можете добавить больше элментов комплексности для проверки, если желаете, но этот минимальный набор уже достаточен для использования на вашем сайте! Напишите в комментариях, если вы использовали это на своем сайте и какой был результат.
Возврат к основам или как создать HTML5 шаблон?!
Как самостоятельно освоить веб-строительство?
Веб-дизайн и оптимизация SEO при создании сайта
8 HTML5 и CSS3 сниппетов для разработки и дизайна новых проектов
8 HTML5 и CSS3 сниппетов для разработки и дизайна новых проектов