June 18, 2021

How to Check if Password is Strong or Weak using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if password is strong or weak in javascript. This is a very common convention that every web developer follows to make sure the password entered by the user is strong enough.

A weak password makes a user’s account more vulnerable to attackers. This is something that not every user understands and you cannot deny the fact that as web developers, it is our responsibility to enforce certain restrictions when it comes to passwords.

There are a bunch of third-party libraries that can help us in ensuring that the password entered by a user is strong enough or not. But in this tutorial, we will go with the regex approach. In this approach, a password has to go through multiple regex checks.

A password will be considered a strong password if it passes those checks. Otherwise, it will be considered a weak password.

In the following example, we will enter a random password in the input field. Upon click of a button, we will verify its strength and display strong or weak on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, h1, and button). The div element is just a wrapper for the rest of the elements.
The button element has “Check” and the h1 element has “Result” as innerText.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text" placeholder="Enter Password">
        <button>Check</button>
        <h1>Result</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input, button{
    padding: 5px 10px;
    margin: 5px;
}

Javascript

We have selected the button, input, and h1 elements using document.querySelector() method and stored them in btnCheck, input, and result variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are calling isStrongPassword() method and passing the value of the input element as a parameter. This method will verify password strength and set “Weak” or “Strong” as innerText of the h1 element.

Strong Password Should Have:

Minimum 10 and maximum 20 characters.
At least 3 lowercase letters.

At least 3 uppercase letters.
At least 3 digits.
At least 2 special characters.

let btnCheck = document.querySelector('button');
let input = document.querySelector('input');
let result = document.querySelector('h1');


let maxLength = 20;
let minLength = 10;

let lowerMinCount = 3;
const LOWER_REGEX = /([a-z])/g;

let upperMinCount = 3;
const UPPER_REGEX = /([A-Z])/g;

let numMinCount = 2;
const NUM_REGEX = /([\d])/g;

let specialMinCount = 2;
const SPECIAL_REGEX = /([$&+,:;=?@#|'<>.^*()%!-])/g;

btnCheck.addEventListener('click', () => {

    let password = input.value;

    if(password.length > maxLength){
        result.innerText = "Password should be less than 20 characters";
        return;        
    }

    result.innerText = isStrongPassword(password) ? 'STRONG' : 'WEAK';

});


function isStrongPassword(password) {
    let upperMatch = password.match(UPPER_REGEX) ?? [];
    let lowerMatch = password.match(LOWER_REGEX) ?? [];
    let numMatch = password.match(NUM_REGEX) ?? [];
    let specialMatch = password.match(SPECIAL_REGEX) ?? [];

    return password.length >= minLength &&
    upperMatch.length >= upperMinCount &&
    lowerMatch.length >= lowerMinCount &&
    numMatch.length >= numMinCount &&
    specialMatch.length >= specialMinCount
}

You May Also Like: