Add a password strength meter to your sign up forms.

$.addPasswordStrengthMeter.js

(function ( $ ) {
    $.fn.addPasswordStrengthMeter = function(meter_el) {
        var that = this;

        if (typeof meter_el == 'undefined') {
            meter_el = $('.password-strength-meter');
        }

        var bars = meter_el.children();

        if (bars.length != 4) {
            console.log("Exception: $.fn.passwordStrength() must reference a meter with four children.");
            return;
        }

        var assertions = [
            // Two uppercase.
            function (value) {
                var matches = value.match(/^.*[A-Z].*[A-Z].*$/);
                return value.length >= 8 && matches != null
            },
            // Two digits.
            function (value) {
                var matches = value.match(/^.*[0-9].*[0-9].*$/);
                return value.length >= 8 && matches != null
            },
            // One special case letter.
            function (value) {
                var matches = value.match(/^.*[!@#%^&*\$].*$/);
                return value.length >= 8 && matches != null
            },
            // Three lowercase.
            function (value) {
                var matches = value.match(/^.*[a-z].*[a-z].*[a-z].*$/);
                return value.length >= 8 && matches != null
            }
        ];

        this.on('keyup', function() {
            var value = that.val();
            var strength = 0;

            $.each(assertions, function(index, assertion) {
                if (assertion(value)) {
                    strength++;
                }
            });

            var counter = 0;
            for (var i = 3; i >= 0; i--) {
                if (strength > counter) {
                    $(bars.get(i)).addClass('active');
                } else {
                    $(bars.get(i)).removeClass('active');
                }
                counter ++;
            }
        });

        return this;
    };

}( jQuery ));

example.html

<div class="form-group">
  <label for="signup-password">Password</label>
  <input type="password" class="form-control" id="signup-password" name="password">
  <div class="password-strength-meter landing">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>