It is a good practice to indicate the strength of the passwords that the users of your website choose so that they can make a secure choice. You can make a password strength indication for your website using JavaScript. A simple JavaScript function to accomplish this is discussed below. It gives a visual indication of the strength using a progress bar and also a textual description.
(Note : Progress Bar Using JavaScript has been described in a previous post)
Here a JavaScript function check() is used to check the strength of the password. The function is called every time a key press occurs. The function takes the password as the parameter. It checks the password for five conditions to determine its strength. The five conditions are as follows.
<html>
<head>
<title>Password strength</title>
<script type="text/javascript">
function check(x)
{
var level = 0;
var p1 = /[a-z]/;
var p2 = /[A-Z]/;
var p3 = /[0-9]/;
var p4 = /[\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\|\\\;\:\'\"\,\<\.\>\/\?\`\~]/;
if(x.length>=8)
level++;
if(p1.test(x))
level++;
if(p2.test(x))
level++;
if(p3.test(x))
level++;
if(p4.test(x))
level++;
prog_bar(level,0,5,200,5,"#0066FF","#99FFFF");
}
function prog_bar(cur_val,min_val,max_val,width,height,border,fill)
{
var str = "",res = 0;
if(cur_val>=min_val && cur_val<=max_val)
{
if(min_val<max_val)
{
res = ((cur_val-min_val)/(max_val-min_val))*100;
res = Math.floor(res);
}
else
{
res = 0;
}
}
else
{
res = 0;
}
if(res<=40)
fill = "#FF0000";
else if(res<=80)
fill = "#FFFF00";
else
fill = "#00FF00";
str = str + "<div style=\"border:"+border+" solid thin; width:"+width+"px; height:"+height+"px;\">";
str = str + "<div style=\"background-color:"+fill+"; width:"+res+"%; height:"+height+"px;\">";
str = str + "</div></div>";
if(res<=40)
str = str + "Weak";
else if(res<=60)
str = str + "Good";
else if(res<=80)
str = str + "Strong";
else
str = str + "Excellent";
document.getElementById("prog_bar").innerHTML = str;
}
</script>
</head>
<body>
For maximum security, password should be min 8 characters long and a combination of
<br />uppercase and lowercase letters, numbers and symbols.<br /><br />
Password : <input type="password" onkeyup="check(this.value)" /><br /><br />
<div id="prog_bar"></div>
</body>
</html>
(Note : Progress Bar Using JavaScript has been described in a previous post)
Here a JavaScript function check() is used to check the strength of the password. The function is called every time a key press occurs. The function takes the password as the parameter. It checks the password for five conditions to determine its strength. The five conditions are as follows.
- Level 1 : Password should be 8 characters long.
- Level 2 : It should contain at least one lower case letter.
- Level 3 : It should contain at least one upper case letter.
- Level 4 : It should contain at least one number.
- Level 5 : It should contain at least one special character.
Code
The complete code (HTML + JavaScript) is given below.
<head>
<title>Password strength</title>
<script type="text/javascript">
function check(x)
{
var level = 0;
var p1 = /[a-z]/;
var p2 = /[A-Z]/;
var p3 = /[0-9]/;
var p4 = /[\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\|\\\;\:\'\"\,\<\.\>\/\?\`\~]/;
if(x.length>=8)
level++;
if(p1.test(x))
level++;
if(p2.test(x))
level++;
if(p3.test(x))
level++;
if(p4.test(x))
level++;
prog_bar(level,0,5,200,5,"#0066FF","#99FFFF");
}
function prog_bar(cur_val,min_val,max_val,width,height,border,fill)
{
var str = "",res = 0;
if(cur_val>=min_val && cur_val<=max_val)
{
if(min_val<max_val)
{
res = ((cur_val-min_val)/(max_val-min_val))*100;
res = Math.floor(res);
}
else
{
res = 0;
}
}
else
{
res = 0;
}
if(res<=40)
fill = "#FF0000";
else if(res<=80)
fill = "#FFFF00";
else
fill = "#00FF00";
str = str + "<div style=\"border:"+border+" solid thin; width:"+width+"px; height:"+height+"px;\">";
str = str + "<div style=\"background-color:"+fill+"; width:"+res+"%; height:"+height+"px;\">";
str = str + "</div></div>";
if(res<=40)
str = str + "Weak";
else if(res<=60)
str = str + "Good";
else if(res<=80)
str = str + "Strong";
else
str = str + "Excellent";
document.getElementById("prog_bar").innerHTML = str;
}
</script>
</head>
<body>
For maximum security, password should be min 8 characters long and a combination of
<br />uppercase and lowercase letters, numbers and symbols.<br /><br />
Password : <input type="password" onkeyup="check(this.value)" /><br /><br />
<div id="prog_bar"></div>
</body>
</html>
No comments:
Post a Comment