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="">

<head runat="server">


<script type="text/javascript" src=""></script>

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



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


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

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






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');


$('<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");


$('<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");


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




else if (n==0) {



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






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