Description:
In this tutorial, I am going to explain how to create password strength
indication using Jquery.
We are creating a new website that allows user registration form. Most of the users want to rush up the registration form, and they won’t
give much attention to the password. This may leads to poor security, and
password can be hacked easily.
It is always a good idea to give an indication for the user about how
safe their password is.
The user can able to continue with the registration only when a
sufficient password is entered.
In the below example, I am checking the following simple conditions.
Ø If the password length less than five character, indication message will show
as ‘Weak’
Ø If the password length more than five character, indication message will show
as ‘Strong’
Ø If the password length is equal to five characters, indication message
will show as ‘Medium’
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to check password strength using jQuery</title>
<script
src="jquery-1.10.2.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('#txtPassword').keyup(function () {
var
textval = $('#txtPassword').val();
$('#Pwdstatus').html(ChkPwdStatus(textval));
return
false;
});
function
ChkPwdStatus(textval) {
var
pwdlength = textval.length;
if
(pwdlength < 5) {
$('#Pwdstatus').removeClass();
$('#Pwdstatus').addClass('weak');
return
'Weak';
}
else
if (pwdlength == 5) {
$('#Pwdstatus').removeClass();
$('#Pwdstatus').addClass('good');
return
'Good';
}
else
{
$('#Pwdstatus').removeClass();
$('#Pwdstatus').addClass('strong');
return
'Strong';
}
}
});
</script>
<style
type="text/css">
.strong
{
color:
Green;
}
.good
{
color:
Orange;
}
.weak
{
color:
Red;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Enter Password:"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><span id="Pwdstatus"></span>
</div>
</form>
</body>
</html>
In the above example, I am calling keyup() method
for the password textbox. Whenever each key is pressed, it will call the
function ChkPwdStatus
(). This function will return the
indication about the password
0 comments:
Post a Comment