jQuery Password Strength Checker

Step 2: Include jQuery Library

Link the jQuery library in your project. You can use a CDN link or a local copy. We use a CDN in this example.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Step 3: Include Password Strength Checker JavaScript File

To make our password strength checker work, we use a small JavaScript file called password_strength_checker.js. This file contains all the logic to calculate how strong a password is and display the result in real-time.

Here’s what this file does:

• Check password length: Ensures the password is long enough for security.
• Check character types: Counts numbers, lowercase letters, uppercase letters, and special characters.
• Calculate strength: Gives a score based on the combination of character types and length.
• Assign levels: Converts the score to easy-to-understand levels like Too weak, Weak, Normal, Strong, and Very strong.
• Update UI: Shows the strength text and optionally a color bar as the user types.
• Optional callback: Developers can run extra actions whenever password strength is updated.

(function($){

    $.fn.password_strength = function(options) {
        var settings = $.extend({
            container: null,
            bar: null,
            minLength: 6,
            texts: {
                1: 'Too weak',
                2: 'Weak password',
                3: 'Normal strength',
                4: 'Strong password',
                5: 'Very strong password'
            },
            onCheck: null
        }, options);

        return this.each(function() {
            var $input = $(this);
            var $container = settings.container ? $(settings.container) : $('<span class="password_strength"></span>').insertAfter($input);
            var $bar = settings.bar ? $(settings.bar) : null;

            function getLevel(val) {
                if (val.length < settings.minLength) return 1;

                var strength = 0;
                if (/[0-9]/.test(val)) strength += 2;
                if (/[a-z]/.test(val)) strength += 2;
                if (/[A-Z]/.test(val)) strength += 2;
                if (/[^a-zA-Z0-9]/.test(val)) strength += 3;

                // Add bonus for very long passwords
                if (val.length >= 12) strength += 2;  // increase max points

                // Map score to levels 1-5
                if (strength <= 3) return 2;
                else if (strength <= 6) return 3;
                else if (strength <= 9) return 4;
                else return 5;  // now complex passwords can reach 5
            }

            $input.on('keyup', function() {
                var val = $input.val();
                var level = getLevel(val);

                $container.text(settings.texts[level]).attr('class', 'password_strength password_strength_' + level);

                if ($bar) $bar.attr('class', 'password_bar password_bar_' + level);

                if (settings.onCheck) settings.onCheck.call(this, level);
            });

            if ($input.val() !== '') $input.trigger('keyup');
        });
    };

})(jQuery);

This file works with jQuery, so make sure your page includes jQuery before using it. The file is simple, lightweight, and easy to customize to fit any website or project.

<script type="text/javascript" src="js/password_strength_checker.js"></script>

Step 4: Call the Password Strength Function

Call the function on your password field to activate the strength checker.

$(function() {
    $('.password').password_strength(); 
});

Example Use Case: When a user types a password in a signup form, they see a live color indicator showing if the password is weak or strong.