jQuery Plugin "Password Strength Checker"

jQuery Password Strength Checker will check the value of a password field and evaluate the strength of the typed password. This is done by checking for the diversity of character types "numbers", "lowercase and uppercase letters" as soon as "special characters".

The Layout is full customizable by CSS (Cascading Style Sheet) that allows you to change colors, borders and backgrounds.

Download the latest Version of Password Strength Checker (ZIP File - inluded JS, CSS, Images)

[ Example ] default, orientation right

View Source:

<form action="" autocomplete="off">
    <input 
		type="password" 
		name="password_right" 
		class="mycustomclass-default"
	/>
</form>
<script type="text/javascript">
    jQuery(function(){
        jQuery(
            ".mycustomclass-default"
        ).passwordstrengthchecker();
    });
</script>

 

[ Example ] orientation left, min-length 4, prefered-length 12

View Source:

<form action="" autocomplete="off">
    <input 
		type="password" 
		name="password_left" 
		class="mycustomclass-left"
	/>
</form>
<script type="text/javascript">
    jQuery(function(){
        jQuery(
            ".mycustomclass-left"
        ).passwordstrengthchecker({
			position : 'left',
			checkRuleLengthMin : 4,
			checkRuleLengthPrefered : 12
		});
    });
</script>

 

[ Example ] orientation top

View Source:

<form action="" autocomplete="off">
    <input 
		type="password" 
		name="password_top" 
		class="mycustomclass-top"
	/>
</form>
<script type="text/javascript">
    jQuery(function(){
        jQuery(
            ".mycustomclass-top"
        ).passwordstrengthchecker({
			position : 'top'
		});
    });
</script>

 

[ Example ] orientation bottom

View Source:

<form action="" autocomplete="off">
    <input 
		type="password" 
		name="password_bottom" 
		class="mycustomclass-bottom"
	/>
</form>
<script type="text/javascript">
    jQuery(function(){
        jQuery(
            ".mycustomclass-bottom"
        ).passwordstrengthchecker({
			position : 'bottom'
		});
    });
</script>

 

Example, localized "German"

View Source:

<form action="" autocomplete="off">
    <input 
		type="password" 
		name="password_localized" 
		class="mycustomclass-localized"
	/>
</form>
<script type="text/javascript">
	
	var germanStrings = {
		headline : 'Passwortsicherheit:',
		quality : {
			too_short : 'zu kurz',
			weak : 'Schwach',
			good : 'Gut',
			strong : 'Stark'
		},
		help : 'Verwenden Sie mindestens 8 Zeichen! Das Passwort sollte aus Buchstaben, Zahlen und Sonderzeichen bestehen. Ihr Passwort sollte keine Reihen z.B. "1234" oder "abcd" enthalten.' 
	};
	
    jQuery(function(){
        jQuery(
            ".mycustomclass-localized"
        ).passwordstrengthchecker({
			localizedStrings : germanStrings
		});
    });
</script>

 

Example, define custom rules to check password strength

View Source:

<form action="" autocomplete="off">
    <input 
		type="password" 
		name="password_customrules" 
		class="mycustomclass-customrules"
	/>
</form>
<script type="text/javascript">
jQuery(function(){
	jQuery(
		".mycustomclass-customrules"
	).passwordstrengthchecker({
		checkRules : {
			rule_1 : [
				// add qualitiy point if all of these rules passed
				/([a-zA-Z])/,
				/([0-9])/
			],
			rule_2 : [
				/([!,%,&,@,#,$,^,*,?,_,~])/
			],
			rule_3 : [
				/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/
			]
		}
	});
});
</script>