Password Strength check using Regular Expression in JavaScript

Password Strength check using Regular Expression in JavaScript

K. M. Shawkat Zamil | September 27, 2022

Hello Developers,

In this demonstration, I will show you how to check password strength using JavaScript. Here I will use regular expressions.


First Step: Create the html password input field


Here we have to use some CSS code which is given below:


    .passwordInput {
        margin-top: 5%;
        text-align: center;

    .displayBadge {
        margin-top: 1%;
        display: none;
        text-align: center;
        color: white;


 After that,


<div class="col-md-12 col-sm-12 form-group">
    <input type="password" name="password" id="password" placeholder="Enter Password"

<span id="StrengthDisp" class="badge displayBadge col-md-12 col-sm-12">Weak</span>


we have to create the input field. The code is:


Second Step: Write the JavaScript Code


Here is the output:



For Securing the password we have created several conditions:

  1. Strong: At least one lowercase letter (?=.*[a-z]), one uppercase letter (?=.*[A-Z]), one digit (?=.*[0-9]), one special character (?=.*[^A-Za-z0-9]), and is at least eight characters long(?=.{8,}).
  2. Medium: We are checking for at least six characters. It also has | to check for either of the two conditions (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}) or (?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}).
  3. Weak: If the password entered does not meet the strong or medium-level requirements, then it is deemed weak.


The JavaScript code is:


    let timeout;
    let password = document.getElementById('password')
    let strengthBadge = document.getElementById('StrengthDisp')

    let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
    let mediumPassword = new RegExp(

    function StrengthChecker(PasswordParameter) {
        if (strongPassword.test(PasswordParameter)) {
   = "green"
            strengthBadge.textContent = 'Strong'
        } else if (mediumPassword.test(PasswordParameter)) {
   = 'blue'
            strengthBadge.textContent = 'Medium'
        } else {
   = 'red'
            strengthBadge.textContent = 'Weak'
    password.addEventListener("input", () => { = 'block'
        timeout = setTimeout(() => StrengthChecker(password.value), 500);
        if (password.value.length !== 0) {
   != 'block'
        } else {
   = 'none'


That's it for today. From the above part, you will learn how to use JavaScript RegEx to create a three-level password checker.


Hope you might get help with the journey of development.


Read More: Calculate years months days between two dates in JavaScript


K. M. Shawkat Zamil

K. M. Shawkat Zamil

Senior Software Engineer

I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.