Password Strength Checker JavaScript

Password Strength Checker JavaScript

Password strength checker JavaScript is an easy-to-use online password strength checker. This is supposed to calculates the password strength and signifies the score value as a highlighted bar. A password strength meter shows how revolting a given password should be to password cracking tries such as brute force and dictionary attacks.

In password strength checker JavaScript jQuery, meters have guidelines to choose points for password toughening measures together with a full combination of numbers, symbols, uppercase and lowercase letters.

In this program, there is a white container with heading and a password input field. When you enter characters on this password field, the meter and an information text are given away on the bottom of an input field.

you’ll find three meters with different colors which specifies different info. There is also made known a password show or hide button.

Check this Responsive Event Calendar jQuery

Load jQuery JavaScript library and Bootstrap 4 framework with main.js

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css?x84038" />
<script src="/path/to/cdn/jquery.slim.min.js?x84038"></script>
<script src="/path/to/cdn/bootstrap.min.js?x84038"></script>
<script src="scripts/main.js"></script>

Create the HTML for the password strength checker.

<div id="typepass">
  <div id="strengthResult">
  </div>
</div>

Create a regular input field to accept password strings.

<input type="text" placeholder="Type the password" id="idPassword" autofocus />

Feel free to override the default parameters in the main.js

$(document).ready(function () {

    $('#idPassword').on('keyup', function () {

        let textElement = $(this).val()
        let strength = 0

        //===========Business rules==================
        $('#typepass').find('h4').html(`Your Password: ${textElement}`)

        if (textElement.length > 0) {
            let sizeElements = textElement.length

            if (sizeElements > 10) {

                strength += 30

            } else {
                let calcMath = (sizeElements * 2)

                strength += calcMath

            }

        }

        let lowerCase = new RegExp(/[a-z]/)
        if (lowerCase.test(textElement)) {
            strength += 16
        }

        let upperCase = new RegExp(/[A-Z]/)
        if (upperCase.test(textElement)) {
            strength += 18
        }

        let regularNumber = new RegExp(/[0-9]/i)
        if (regularNumber.test(textElement)) {
            strength += 16
        }

        let specialChars = new RegExp(/[^a-z0-9]/i)
        if (specialChars.test(textElement)) {
            strength += 20
        }
        //============end Business rules==============

        //======Results Rendering=====================
        //Function to render this result
        let renderResult = (strengthData, color) => {
            return $('#strengthResult').html(
                `
            <h5>Strength Analyses:</h5>
            <h5>${strengthData}% = Very Weak</h5>                
            <div class="progress" style="height: 40px;">
                <div class="progress-bar bg-${color}" role="progressbar" style="width: ${strengthData}%" aria-valuenow="${strengthData}" aria-valuemin="0" aria-valuemax="100"><strong style="font-size: 30px">${strength}%</strong></div>
            </div>`
            )
        }

        if (strength < 21) {
            renderResult(strength, 'danger')//red very weak password
        } else
            if (strength > 20 && strength < 41) {
                renderResult(strength, 'warning')//orange weak password
            } else
                if (strength > 40 && strength < 61) {
                    renderResult(strength, 'secondary')//medium password
                } else
                    if (strength > 60 && strength < 81) {
                        renderResult(strength, 'info')// strong password
                    } else {
                        renderResult(strength, 'success')//very strong password
                    }

        //======Hide the div containing the result====
        if (strength == 0) {

            $('#typepass').addClass('showHidden')

        } else {

            $('#typepass').removeClass('showHidden')

        }

    });

});
JavaScript Password Strength Checker

Default Rules:

Length >10: +30
lowerCase: +16
upperCase: +18
Regular Number: +16
Special Characters: +20

Results:

Strength < 21: Very Weak (Red)

Strength > 20 && strength < 41: Weak (Orange)

Strength > 40 && strength < 61: Medium (Grey)

Strength > 60 && strength < 81: Strong (Blue)

Strength > 81: Very Strong (Green)

File Info.

File Size5 KB
Last Update13 Days Ago
Published Date19 Days Ago
LicenseMIT

Your email address will not be published. Required fields are marked *

More Stories
Protect Email Address on Website from Spam
Protect Email Address on Website from Spam Bot Using JavaScript Library