njonsson/demo.html

## demo.html
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>
      passwordComplexity jQuery plugin demo
    </title>
    <style type='text/css'>
      * {
        font-family: Helvetica, Arial, sans-serif;
        font-size:   100%;
      }

      .field {
        clear: both;
      }

      .field label {
        display:    block;
        float:      left;
        padding:    0.25em 0.5em 0 0;
        text-align: right;
        width:      5em;
        height:     2em;
      }

      .field input {
        width: 6em;
      }

      .password-complexity {
        background-color: #fcf0ad;
        border-top:       1px solid lightgrey;
        border-right:     1px solid dimgray;
        border-bottom:    1px solid dimgray;
        border-left:      1px solid lightgrey;
        font-size:        70%;
        margin-left:      1em;
        padding:          0.25em;
      }
    </style>
  </head>
  <body>
    <div class='field'>
      <label for='password'>Password:</label>
      <input id='password' name='password' type='password' />
    </div>
    <div class='field'>
      <label for='password_confirmation'>Again:</label>
      <input name='password_confirmation' type='password' />
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <script src='jquery.password-complexity.js' type='text/javascript'></script>
    <script type='text/javascript'>
      //<![CDATA[
        jQuery.noConflict();
        (function ($) {
          $(document).ready(function () {
            $(':password:first').passwordComplexity();
          });
        }(jQuery));
      //]]>
    </script>
  </body>
</html>

## jquery.password-complexity.js
'use strict';

(function ($) {
  $.fn.passwordComplexity = function () {
    return this.each(function () {
      var suggestionsElement = $('<span class="password-complexity" ' +
                                       'style="display: none;">'      +
                                 '</span>');
      $(this).after(suggestionsElement).blur(function () {
        var password    = $(this).val(),
            suggestions = [],
            message     = null;
        if (0 !== password.length) {
          if (password.match(/[a-z]/) === null) {
            suggestions.push('a lowercase letter');
          }
          if (password.match(/[A-Z]/) === null) {
            suggestions.push('an uppercase letter');
          }
          if (password.match(/\d/) === null) {
            suggestions.push('a numeric character');
          }
          if (password.match(/[\W_]/) === null) {
            suggestions.push('a punctuation character');
          }
          if (0 !== suggestions.length) {
            message = 'Add '                   +
                      suggestions.join(' or ') +
                      ' to strengthen your password.';
          }
        }
        if (message) {
          suggestionsElement.html(message).fadeIn();
        } else {
          suggestionsElement.fadeOut(function () {
            suggestionsElement.html(message);
          });
        }
      });
    });
  };
}(jQuery));
	<?xml version='1.0' encoding='utf-8' ?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
	<head>
	<title>
	passwordComplexity jQuery plugin demo
	</title>
	<style type='text/css'>
	* {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%;
	}

	.field {
	clear: both;
	}

	.field label {
	display: block;
	float: left;
	padding: 0.25em 0.5em 0 0;
	text-align: right;
	width: 5em;
	height: 2em;
	}

	.field input {
	width: 6em;
	}

	.password-complexity {
	background-color: #fcf0ad;
	border-top: 1px solid lightgrey;
	border-right: 1px solid dimgray;
	border-bottom: 1px solid dimgray;
	border-left: 1px solid lightgrey;
	font-size: 70%;
	margin-left: 1em;
	padding: 0.25em;
	}
	</style>
	</head>
	<body>
	<div class='field'>
	<label for='password'>Password:</label>
	<input id='password' name='password' type='password' />
	</div>
	<div class='field'>
	<label for='password_confirmation'>Again:</label>
	<input name='password_confirmation' type='password' />
	</div>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
	<script src='jquery.password-complexity.js' type='text/javascript'></script>
	<script type='text/javascript'>
	//<![CDATA[
	jQuery.noConflict();
	(function ($) {
	$(document).ready(function () {
	$(':password:first').passwordComplexity();
	});
	}(jQuery));
	//]]>
	</script>
	</body>
	</html>
	'use strict';

	(function ($) {
	$.fn.passwordComplexity = function () {
	return this.each(function () {
	var suggestionsElement = $('<span class="password-complexity" ' +
	'style="display: none;">' +
	'</span>');
	$(this).after(suggestionsElement).blur(function () {
	var password = $(this).val(),
	suggestions = [],
	message = null;
	if (0 !== password.length) {
	if (password.match(/[a-z]/) === null) {
	suggestions.push('a lowercase letter');
	}
	if (password.match(/[A-Z]/) === null) {
	suggestions.push('an uppercase letter');
	}
	if (password.match(/\d/) === null) {
	suggestions.push('a numeric character');
	}
	if (password.match(/[\W_]/) === null) {
	suggestions.push('a punctuation character');
	}
	if (0 !== suggestions.length) {
	message = 'Add ' +
	suggestions.join(' or ') +
	' to strengthen your password.';
	}
	}
	if (message) {
	suggestionsElement.html(message).fadeIn();
	} else {
	suggestionsElement.fadeOut(function () {
	suggestionsElement.html(message);
	});
	}
	});
	});
	};
	}(jQuery));