Password Strength Checker with jQuery and ASP.NET with Enable/Disable Checkbox

Validating password against minimum length is one thing but some time it's good to give user a visual clue of how good his password is. Today we will try to achieve this using jQuery, we will also provide ability for user to enable/disable visual clue using checkbox. Below is snapshot of what it's going to look like in different stages of password strength check:

so let's setup our page:

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="PasswordStrengthChecker.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="_txtPasswordStrength" runat="server" TextMode="Password"></asp:TextBox>

<asp:CheckBox ID="_passwordCheck" runat="server" />

</div>

</form>

</body>

</html>

 

As you can see I have included reference for jQuery library as well as my script file that we will use to write our password check logic and here is the code for that file:

$(document).ready(function() {

$('#_passwordCheck').click(function() {

var n = $('input:checked').length;

 

if (n > 0) {

$('#_txtPasswordStrength').live('keyup', function() {

var passLength = $(this).val();

if (passLength.match('^[a-zA-Z]+$')) {

$(this).css('backgroundColor', 'Red');

$('#_strengthIndicator').remove();

$('<br /><span id="_strengthIndicator" style="Background-Color:Red">You can do better</span>').insertAfter('#_passwordCheck');

 

}

else if (passLength.match('^[a-zA-Z0-9]+$')) {

$(this).css("backgroundColor", "Yellow");

$('#_strengthIndicator').remove();

$('<br /><span id="_strengthIndicator" style="Background-Color:Yellow">Little More</span>').insertAfter('#_passwordCheck');

}

else if (passLength.match('^[a-zA-Z0-9\*]+$')) {

$(this).css("backgroundColor", "Green");

$('#_strengthIndicator').remove();

$('<br /><span id="_strengthIndicator" style="Background-Color:Green">There you go</span>').insertAfter('#_passwordCheck');

}

});

}

else if (n==0) {

 

$('#_strengthIndicator').remove();

$('#_txtPasswordStrength').css('backgroundColor', 'white');

$('#_txtPasswordStrength').die('keyup');

}

});

});

 

Now you can see we are checking password strength against regular expression but you can use lenth or replace this with any other regex logic.

Final Result:

 

 

 

 

Tags: , ,

ASP.NET | jQuery