Password strength checker using regular expressions

Puzzled Panther answered on August 2, 2022 Popularity 8/10 Helpfulness 4/10

answer Password strength checker using regular expressions

related password strength regex

Password strength checker using regular expressions

Comment

// timeout before a callback is called

    let timeout;

    // traversing the DOM and getting the input and span using their IDs

    let password = document.getElementById('PassEntry')
    let strengthBadge = document.getElementById('StrengthDisp')

    // The strong and weak password Regex pattern checker

    let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
    let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')
    
    function StrengthChecker(PasswordParameter){
        // We then change the badge's color and text based on the password strength

        if(strongPassword.test(PasswordParameter)) {
            strengthBadge.style.backgroundColor = "green"
            strengthBadge.textContent = 'Strong'
        } else if(mediumPassword.test(PasswordParameter)){
            strengthBadge.style.backgroundColor = 'blue'
            strengthBadge.textContent = 'Medium'
        } else{
            strengthBadge.style.backgroundColor = 'red'
            strengthBadge.textContent = 'Weak'
        }
    }

    // Adding an input event listener when a user types to the  password input 

    password.addEventListener("input", () => {

        //The badge is hidden by default, so we show it

        strengthBadge.style.display= 'block'
        clearTimeout(timeout);

        //We then call the StrengChecker function as a callback then pass the typed password to it

        timeout = setTimeout(() => StrengthChecker(password.value), 500);

        //Incase a user clears the text, the badge is hidden again

        if(password.value.length !== 0){
            strengthBadge.style.display != 'block'
        } else{
            strengthBadge.style.display = 'none'
        }
    });

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: www.section.io

Tags: javascript using

Link to this answer
Share Copy Link

Contributed on Aug 02 2022

Puzzled Panther

0 Answers Avg Quality 2/10

Closely Related Answers

password strength regex

Comment

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*]).{8,}$

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: regex javascript

Link to this answer
Share Copy Link

Contributed on Apr 02 2024

Restu Wahyu Saputra

0 Answers Avg Quality 2/10

Password strength checker using regular expressions

Contents

More Related Answers

Password strength checker using regular expressions

Closely Related Answers

password strength regex

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.