input_password

<p>
  <input id="password" type="password" size="30" name="params[password]" value="" /><br />
</p>

<img id="strengthLevel_1" src="https://secure.heteml.jp/image/order/pass_01.gif" alt="" style="display: block" />
<img id="strengthLevel_2" src="https://secure.heteml.jp/image/order/pass_02.gif" alt="" style="display: none" />
<img id="strengthLevel_3" src="https://secure.heteml.jp/image/order/pass_03.gif" alt="" style="display: none" />
<img id="strengthLevel_4" src="https://secure.heteml.jp/image/order/pass_04.gif" alt="" style="display: none" />

jquery.hippoPasswordStrength.js

(function($){
    $.fn.hippoPasswordStrength = function() {
        this.bind('keyup focusout', function() {
            var password = $(this).val();
            passwordStrengthCheck(password);
        });

        function passwordStrengthCheck(password) {
      	    var strengthLevel = getStrengthLevel(password);
      	    $('[id^=strengthLevel_]').css('display', 'none');
            $('#strengthLevel_' + strengthLevel).show();
	}

    	function getStrengthLevel(password) {
	    var strengthLevel = 0;

	    if (password.length < 6) {
		strengthLevel = 1;
            }
	    if (password.length >= 6) {
                strengthLevel = 2;
	    }
	    if (password.length >= 8 && password.match(/[a-zA-Z]+/) && password.match(/[0-9]+/)) {
                strengthLevel = 3;
            }
            if (password.length >= 12 && password.match(/[a-z]/) && password.match(/[A-Z]/) && password.match(/[0-9]/)) {
	        strengthLevel = 4;
	    }
	    return strengthLevel;
	}
    };
})(jQuery);

$(function(){
    $('#password').hippoPasswordStrength();
});