Skip to content

Password Strength Checker Using JavaScript

password strength checker

In today’s digital world, it is critical to ensure the security of online accounts and personal information. The usage of password strength checker or strong passwords is a frequent security measure used by websites. However, it can be difficult for users to determine the strength of their chosen passwords. To remedy this issue, we can use JavaScript, a popular computer language for web development, to design a password strength checker. With a practical example, we will look at how to create such a password strength tester in this post.

The strength of a password can be assessed using a variety of criteria, including length, complexity, and the existence of a mix of characters, including capital and lowercase letters, digits, and special symbols. We can give consumers immediate feedback on the strength of their passwords by including these criteria into our password strength analyzer.

Create the HTML framework for our password strength checker first. Make a new HTML file in your favourite code editor by opening it. To create the foundational structure, add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Password Strength Checker</title>
</head>
<body>
    <h1>Password Strength Checker</h1>
    <label for="password">Enter your password:</label>
    <input type="password" id="password">
    <button onclick="checkPasswordStrength()">Check</button>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

We have a simple form with a password input box, a check button, and a placeholder for the result in the code above. We’ve also added a JavaScript file called “script.js” using the script> tag.

Let’s now write the JavaScript logic for our password strength tester. In the same directory as your HTML file, create a new file named “script.js” and add the following code:

function checkPasswordStrength() {
    const password = document.getElementById("password").value;
    const result = document.getElementById("result");
    
    let strength = 0;
    const regex = /[$-/:-?{-~!"^_`\[\]]/g;

    if (password.length >= 8) {
        strength++;
    }
    if (password.match(/[a-z]+/)) {
        strength++;
    }
    if (password.match(/[A-Z]+/)) {
        strength++;
    }
    if (password.match(/[0-9]+/)) {
        strength++;
    }
    if (password.match(regex)) {
        strength++;
    }

    let message;
    switch (strength) {
        case 0:
        case 1:
            message = "Weak";
            break;
        case 2:
            message = "Fair";
            break;
        case 3:
            message = "Good";
            break;
        case 4:
            message = "Strong";
            break;
        case 5:
            message = "Excellent";
            break;
    }

    result.innerHTML = message;
}

The checkPasswordStrength function is defined in the JavaScript code above, and it is called when the “Check” button is pressed. Using document.getElementById(“password”).value, we retrieve the password input value and store it in the password variable.

Then, to maintain track of the password’s strength, we initialise a strength variable. We employ regular expressions to determine whether or not a password matches certain criteria. For example, if the password length is at least 8 characters, the strength variable is increased.

This method is repeated for other criteria such as the presence of lowercase, uppercase, digits, and special symbols. When a criterion is met, the strength variable is increased.

Then, based on the value of strength, we utilise a switch statement to assign a suitable message. This message denotes the password’s strength level, which could be “Weak,” “Fair,” “Good,” “Strong,” or “Excellent.”

Finally, we use result to update the HTML element with the id result.innerHTML = message to display the user’s strength message.

Save both files in the same location and launch a web browser to view the HTML file. The password entry field, check button, and result placeholder should all be visible. Enter a password in the input area and press the “Check” button to see the strength of the password shown in the result section.

Congratulations! You have successfully constructed a JavaScript password strength checker. Feel free to modify the criteria and messages to meet your specific needs. Remember that while this password strength checker is a useful tool, it is also critical to educate users on the necessity of strong passwords and other security practises.

Related Articles

JavaScript Interview Questions and Answers

Node.js Interview Questions and Answers

The Ultimate List Of Node.Js Packages For Every Web Developer

How to avoid confusion between ReactJS and React Native

Ionic Vs React Native: Which Is Better and Why?

Which Framework Is Best for Your Project – React JS or Angular JS?

Conclusion

The Password Strength Checker can help users create and secure their online accounts more intelligently by giving them fast feedback on password strength.

You May Also Like

Tags: