Advance Password Strength Check Using jQuery

By | May 11, 2013

For every log in and registration form the password is more peculiar and important one. User also expect their password should be strength.The password can’t be easily guess by any one.The user may expect their password would be short or weak or good or strong. The password strength can be check using PHP, JavaScript, Ajax, jQuery. But we choose jQuery because jQuery is Advanced Scripting langauge. Here we check given password should be in 4 categories such as Too Short, Weak, Good  and Strength. In the same time we remind you we already discuss about

Let’s we check how the given password is  Too Short, Weak, Good  and Strength. Before that just download  jquery.min.js .Click here Form design for Advance password strength check using jQuery

The Form design for advanced password strength check should be

Advanced password strength check

Advanced password strength check

index.php
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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Advanced Password Strength Checking Using jQuery</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div id="container">
<div id="header">
<h2>Advanced Password Strength Checking Using jQuery<h2>
</div>
<div id="content">
<!-- form start-->
<form name="pass_strength">
<p><label for="username">Username : </label>
<input type="text" name="username" class="input" />
</p>
<p><label for="password">Password : </label>
<input type="password" name="password" id="password" class="input" />
<span id="result"></span>
</p>
</form>
<!-- form end-->
</div>
<div id="footer">
<p align="center">Powered by &nbsp;&nbsp; <a href="http://www.byzerotechnologies.com/" target="_blank">Byzero Technologies</a></p>
</div>

</div>
</body>
</html>

Password strength to be calculated by following  jQuery coding

script.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
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
$(document).ready(function() {

$('#password').keyup(function(){
$('#result').html(checkStrength($('#password').val()))
})

function checkStrength(password){

//strength at begining

var strength = 0

//when password is less than 6 means

if (password.length &lt; 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
// when password length is 8 or more

if (password.length &gt; 7) strength += 1

//when password contain both uppercase and lowercase character means

if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

//when password contain both character and number means

if (password.match(/([a-zA-Z])/) &amp;&amp; password.match(/([0-9])/)) strength += 1

//when password contain one special character means

if (password.match(/([!,%,&amp;,@,#,$,^,*,?,_,~])/)) strength += 1


//when password two or more special character means

if (password.match(/(.*[!,%,&amp;,@,#,$,^,*,?,_,~].*[!,%,&amp;,@,#,$,^,*,?,_,~])/)) strength += 1


//now we have calculated strength value, we can return messages


//if value is less than 2

if (strength &lt; 2 ) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2 ) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});

&nbsp;
style.css [stylesheet]
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
body
{
background-color:#CCC;
font-family:"Arial;", Gadget, sans-serif;
}

#container
{

padding:20px 20px 0px 20px;
width:42%;
background-color:#27AECB;
margin:0 auto;
border:5px solid #FFF;
box-shadow: 0px 0px 20px rgb(29, 133, 230);
margin-top:150px;
}
#content
{
margin: 0px 100px 0px 100px;
padding:10px;
border: 2px solid rgb(105, 91, 91);
box-shadow: 2px 2px 10px #FFF;
background: #CCC;
}
.input
{
margin:10px;

}
#result
{
color:#F00;
text-shadow:#666;
}
#footer
{
width:76%;
margin:20px 70px 20px 70px;
background:#000;
box-shadow:2px 2px 10px #666666;
color:#FFF;
}
a
{
color:#06F;
}

Download the Advance password strength check using jQuery click here to download

One thought on “Advance Password Strength Check Using jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *