This Tutorial show you how to create password strength checker and its very important for your website to have some password checking on signup pages to force your users to enter a strong password. This example shows you five stages of password strength very weak, weak, medium, strong and very strong all calculated on your passwords characters and its length.
jQuery and pwdMeter include:
|
|
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.pwdMeter.js"></script>
|
jQuery to fire a call to plugin:
|
|
<script type="text/javascript">
$(document).ready(function(){
$("#password").pwdMeter();
});
</script>
|
HTML Code:
|
|
<div id="grid">
<input type="password" id="password">
<span id="pwdMeter" class="neutral"></span>
</div>
|
CSS Used:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<style>
.veryweak{
color:#B40404;
}
.weak{
color:#DF7401;
}
.medium{
color:#FFFF00;
}
.strong{
color:#9AFE2E;
}
.verystrong{
color:#0B610B;
}
</style>
|
Complete password strength checker
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to create Password Strength checker in jQuery | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.pwdMeter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#password").pwdMeter();
});
</script>
<style>
.veryweak{
color:#B40404;
}
.weak{
color:#DF7401;
}
.medium{
color:#FFFF00;
}
.strong{
color:#9AFE2E;
}
.verystrong{
color:#0B610B;
}
</style>
</head>
<body>
<h2>How to create Password Strength checker in jQuery example. <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<div style="margin-left:auto;margin-right:auto; width:260px;"><input type="password" id="password" />
<span id="pwdMeter" class="neutral"></span></div><br />
</body>
</html>
|
