Click here to Skip to main content
11,638,173 members (74,409 online)
Click here to Skip to main content
Articles » Web Development » ASP.NET » General » Downloads
Add your own
alternative version

ASP.NET - Password Strength Indicator using jQuery and XML

, 31 Jul 2012 CPOL 196.8K 2.4K 185
ASP.NET Password Strength Indicator somewhat similar to AJAX PasswordStrength extender control behavior and implemented by using jQuery and XML.
/*
Password Strength Indicator using jQuery and XML

By: Bryian Tan (bryian.tan at ysatech.com)
01122011 v01.01.00

Description:
Password Strength Indicator somewhat similar to ASP.NET AJAX PasswordStrength extender control behavior 
and implemented by using jQuery and XML. The password information is stored in an XML file. 
Sample XML file contents:
<PasswordPolicy>
<Password>
<duration>180</duration> //password age, expired in xxx days
<minLength>14</minLength> //password minimum length
<maxLength>25</maxLength> //password maximum length
<numsLength>2</numsLength> //number of required digits  
<upperLength>1</upperLength> //number of required upper case  
<specialLength>1</specialLength> //number of required special characters 
<barWidth>200</barWidth> //the bar indicator width
<barColor>Green</barColor> //the bar indicator colors
<specialChars>!@#\$%*()_+^&amp;}{:;?.</specialChars> //allowable special characters
</Password>
</PasswordPolicy>

Resources:
http://fyneworks.blogspot.com/2007/04/dynamic-regular-expressions-in.html
http://projects.sharkmediallc.com/pass/
http://docs.jquery.com/Plugins/Authoring
http://stackoverflow.com/questions/1034306/public-functions-from-within-a-jquery-plugin
*/

(function($) { var password_Strength = new function() { this.countRegExp = function(passwordVal, regx) { var match = passwordVal.match(regx); return match ? match.length : 0; }; this.getStrengthInfo = function(passwordVal) { var len = passwordVal.length; var pStrength = 0; var msg = "", inValidChars = ""; var allowableSpecilaChars = new RegExp("[" + password_settings.specialChars + "]", "g"); var nums = this.countRegExp(passwordVal, /\d/g), lowers = this.countRegExp(passwordVal, /[a-z]/g), uppers = this.countRegExp(passwordVal, /[A-Z]/g), specials = this.countRegExp(passwordVal, allowableSpecilaChars), spaces = this.countRegExp(passwordVal, /\s/g); inValidChars = passwordVal.replace(/[a-z]/gi, "") + inValidChars.replace(/\d/g, ""); inValidChars = inValidChars.replace(/\d/g, ""); inValidChars = inValidChars.replace(allowableSpecilaChars, ""); if (spaces > 0) { return "No spaces!"; } if (inValidChars !== "") { return "Invalid character: " + inValidChars; } if (len > password_settings.maxLength) { return "Password too long!"; } if ((specials + uppers + nums + lowers) < password_settings.minLength) { msg += password_settings.minLength - (specials + uppers + nums + lowers) + " more characters, "; } if (specials == 0 || uppers == 0 || nums == 0 || lowers == 0) { msg += "At least "; } if (nums >= password_settings.numberLength) { nums = password_settings.numberLength; } else { msg += (password_settings.numberLength - nums) + " more numbers, "; } if (specials >= password_settings.specialLength) { specials = password_settings.specialLength; } else { msg += (password_settings.specialLength - specials) + " more symbol, "; } if (uppers >= password_settings.upperLength) { uppers = password_settings.upperLength; } else { msg += (password_settings.upperLength - uppers) + " Upper case characters, "; } if ((len - (uppers + specials + nums)) >= (password_settings.minLength - password_settings.numberLength - password_settings.specialLength - password_settings.upperLength)) { pStrength += (password_settings.minLength - password_settings.numberLength - password_settings.specialLength - password_settings.upperLength); } else { pStrength += (len - (uppers + specials + nums)); } pStrength += uppers + specials + nums; if (lowers === 0) { if (pStrength > 1) { pStrength -= 1; } msg += "1 lower case character, "; } if (pStrength == password_settings.minLength && lowers > 0) { msg = "Strong password!"; } return msg + ";" + pStrength; }; }; var password_settings = { minLength: 12, maxLength: 25, specialLength: 1, upperLength: 1, numberLength: 1, barWidth: 200, barColor: "Red", specialChars: "!@#$", metRequirement: false, useMultipleColors: 0 }; $.fn.password_strength = function(options) { this.metReq = function() { return password_settings.metRequirement; }; $.ajax({ type: "GET", url: "PasswordPolicy.xml", dataType: "xml", success: function(xml) { $(xml).find("Password").each(function() { var _minLength = $(this).find("minLength").text(), _maxLength = $(this).find("maxLength").text(), _numsLength = $(this).find("numsLength").text(), _upperLength = $(this).find("upperLength").text(), _specialLength = $(this).find("specialLength").text(), _barWidth = $(this).find("barWidth").text(), _barColor = $(this).find("barColor").text(), _specialChars = $(this).find("specialChars").text(), _useMultipleColors = $(this).find("useMultipleColors").text(); password_settings.minLength = parseInt(_minLength); password_settings.maxLength = parseInt(_maxLength); password_settings.specialLength = parseInt(_specialLength); password_settings.upperLength = parseInt(_upperLength); password_settings.numberLength = parseInt(_numsLength); password_settings.barWidth = parseInt(_barWidth); password_settings.barColor = _barColor; password_settings.specialChars = _specialChars; password_settings.useMultipleColors = _useMultipleColors; }); } }); return this.each(function() { var barLeftPos = $("[id$='" + this.id + "']").position().left + $("[id$='" + this.id + "']").width(); var barTopPos = $("[id$='" + this.id + "']").position().top + $("[id$='" + this.id + "']").height(); var container = $("<span></span>").css({ position: "absolute", top: barTopPos - 6, left: barLeftPos + 15, "font-size": "75%", display: "inline-block", width: password_settings.barWidth + 40 }); $(this).after(container); var passIndi = $('<div id="PasswordStrengthBorder"></div><div id="PasswordStrengthBar" class="BarIndicator"></div>').css({ position: "absolute", display: "none" }).eq(0).css({ height: 3, top: barTopPos - 16, left: barLeftPos + 15, "border-style": "solid", "border-width": 1, padding: 2 }).end().eq(1).css({ height: 5, top: barTopPos - 14, left: barLeftPos + 17 }).end(); container.before(passIndi); $(this).keyup(function() { var passwordVal = $(this).val(); password_settings.metRequirement = false; if (passwordVal.length > 0) { var msgNstrength = password_Strength.getStrengthInfo(passwordVal); var msgNstrength_array = msgNstrength.split(";"), strengthPercent = 0, barWidth = password_settings.barWidth, backColor = password_settings.barColor; if (msgNstrength_array.length > 1) { strengthPercent = (msgNstrength_array[1] / password_settings.minLength) * barWidth; } $("[id$='PasswordStrengthBorder']").css({ display: "inline", width: barWidth }); if (password_settings.useMultipleColors === "1") { if (parseInt(strengthPercent) >= 0 && parseInt(strengthPercent) <= (barWidth * 0.33)) { backColor = "red"; } else { if (parseInt(strengthPercent) >= (barWidth * 0.33) && parseInt(strengthPercent) <= (barWidth * 0.67)) { backColor = "blue"; } else { backColor = password_settings.barColor; } } } $("[id$='PasswordStrengthBar']").css({ display: "inline", width: strengthPercent, "background-color": backColor }); if (msgNstrength_array[0].lastIndexOf(",") !== -1) { container.text(msgNstrength_array[0].substring(0, msgNstrength_array[0].length - 2)); } else { container.text(msgNstrength_array[0]); } if (strengthPercent == barWidth) { password_settings.metRequirement = true; } } else { container.text(""); $("[id$='PasswordStrengthBorder']").css("display", "none"); $("[id$='PasswordStrengthBar']").css("display", "none"); } }); }); }; })(jQuery);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bryian Tan
Software Developer
United States United States
I have over three years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150728.1 | Last Updated 31 Jul 2012
Article Copyright 2011 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid