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

Easy DatePicker Plugin For Bootstrap – bootstrapDatepickr
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></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

Pondasee: Front End Development ToolKit For Building Themes
$(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')

        }

    });

});

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)

Morphing Modal Window Made of CSS and JQuery

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

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

Strength > 81: Very Strong (Green)

Responsive and lightweight CSS Frameworks for Creating Websites

File Info.

File Size5 KB
Last Update5 Months Ago
Published Date29 August 2020
LicenseMIT