Password Strength Checker Using JavaScript

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.