JavaScript Password Strength Checker

by

Hello Developer, I have shared a JavaScript Password Strength Checker to quickly check the poor, weak or strong password while it will be entered into the password input field.

You have also filled many registration forms on many websites and got a password strength notification in the form of text & a single line just below the password input field. you definitely liked and wanted to integrate this feature into your website. So, Don’t worry, here you will get the complete password strength check source code absolutely free with step by step explanation.

If you are going to create a signup/registration form on your website, then you should also add a password strength checker using javascript. So, that, users can easily understand their password is secure or not while they set a new password.

javascript password strength checker

Create Password Strength Meter using JavaScript

Learn Also –

Cookie Consent Popup in JavaScript

JavaScript Form Validation

JavaScript Accordion with Example

1. Create Password Input & strength info using HTML

just Copy this code and paste into registration form. you need not to change anything in this code and let’s know more this code –

  • User can enter password into input type=”password” into buttet format.
  • You can show & hide password with <span id=”showHide”>.
  • <div id=”passwordStrength”> is the parent of password indicator.
  • <span id=”poor”> is created to indicate poor password in red color.
  • <span id=”weak”> is created to indicate weak password in orange color.
  • <span id=”strong”> is created to indicate strong password in green.
<div id="passwordInput">
    <input type="password">
    <span id="showHide">SHOW</span>
</div>

<div id="passwordStrength">
     <span id="poor"></span>
     <span id="weak"></span>
     <span id="strong"></span>
   </div>
<div id="passwordInfo"></div>

2. Design Password Input & strength info using CSS

You can use this complete CSS code to design password input field & password strength indicator. Even you can add more css according to your project design pattern.

<style type="text/css">

#passwordInput{
    width: 30%;
    display: flex;
    position: relative;
}
 #passwordInput input[type="password"], #passwordInput input[type="text"]{
    width: 100%;
    padding: 10px;
    border: 1px solid lightgrey;
    font-size: 15px;
    
}

#passwordInput #showHide{
  font-size: 12px;
    font-weight: 600;
   position: absolute;
   color:red;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}
#passwordStrength{
    width: 30%;
    height: 5px;
    margin: 5px 0;
    display: none;
}
#passwordStrength span{
  position: relative;
  height: 100%;
  width: 100%;
  background: lightgrey;
  border-radius: 5px;
}
 #passwordStrength span:nth-child(2){
  margin: 0 3px;
}
#passwordStrength span.active:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
#passwordStrength span#poor:before{
  background-color: #ff4757;
}
#passwordStrength span#weak:before{
  background-color: orange;
}
#passwordStrength span#strong:before{
  background-color: #23ad5c;
}
#passwordInfo{
  font-size: 15px;
}
#passwordInfo #poor{
  color: red;
}
#passwordInfo #weak{
  color: orange;
}
#passwordInfo #strong{
  color: green;
}
</style>

3. Create Password Strength checker using javascript

You can use this code directory in your project. But you should know the following pints –

Initialize some variables –

  • passwordInput – It is create to assign the password input field
  • passwordStrength – It is created to assign the parent div of password strength indicator
  • poor – It is created to assign div of poor password indicator
  • weak – It is created to assign div of weak password indicator
  • strong – It is created to assign div of strong password indicator
  • passwordInfo – It is created to assign password srength info in the text format
  • poorRegExp – It is created to assign a regular expression for alphabet only
  • weakRegExp – It is created to assign a regular expression for digit only
  • strongRegExp – It is created to assign a regular expression for special characters only
  • whitespaceRegExp – It is created to assign a regular expression for whitespace

Apply oninput Event on Password Field –

  • passwordInput.oninput – It will execute code that are exist within its block while users start entering their passwords
  • passwordValue – It will store the value of passsword input field
  • passwordLength – It will store the length of the entered password
  • poorPassword – It will store the true or false value by matching the password input values with poorRegExp
  • weakPassword – It will store the true or false value by matching the password input values with weakRegExp
  • strongPassword – It will store the true or false value by matching the password input values with strongRegExport
  • whitespace – It will store the true or false value by matching the password input values with whitespaceRegExp

Declare some Custom Functions –

  • poorPasswordStrength() – It will generate th red indicator for poor password when the password length is less than 2 and password value matches with poorRegExp or weakRegExp or strongRegExp.
  • weakPasswordStrength() – It will generate the orange indicator for weak password when the password length greater than 4 and password value matches with poorRegExp and weakRegExp or strongRegExp.
  • strongPasswordStrength() – It will generate the green indicator for strong password when the password length greater than 6 and password value matches with poorRegExp and weakRegExp or strongRegExp.

Create Show and Hide Password Functionality –

  • showHide – It stores the span tag for creating password toggle
  • showHide.onclick – It will execute showHidePassword() functionwhen you click Show & Hide button that remains within the password input field
  • showHidePassword() – It will work for showing & hiding password
 <script>
    let passwordInput = document.querySelector('#passwordInput input[type="password"]');
    let passwordStrength= document.getElementById('passwordStrength');
    let poor = document.querySelector('#passwordStrength #poor');
    let weak = document.querySelector('#passwordStrength #weak');
    let strong = document.querySelector('#passwordStrength #strong');
    let passwordInfo = document.getElementById('passwordInfo');
  
    let poorRegExp = /[a-z]/;
    let weakRegExp = /(?=.*?[0-9])/;;
    let strongRegExp = /(?=.*?[#?!@$%^&*-])/;
    let whitespaceRegExp = /^$|\s+/;


    passwordInput.oninput= function(){
   
         let passwordValue= passwordInput.value;
         let passwordLength= passwordValue.length;

         let poorPassword= passwordValue.match(poorRegExp);
         let weakPassword= passwordValue.match(weakRegExp);
         let strongPassword= passwordValue.match(strongRegExp);
         let whitespace= passwordValue.match(whitespaceRegExp);

 if(passwordValue != ""){

     passwordStrength.style.display = "block";
     passwordStrength.style.display = "flex";
     passwordInfo.style.display = "block";
     passwordInfo.style.color = "black";

     if(whitespace)
     {
      passwordInfo.textContent = "whitespaces are not allowed";
     }else{
     poorPasswordStrength(passwordLength, poorPassword, weakPassword, strongPassword);
     weakPasswordStrength(passwordLength, poorPassword, weakPassword, strongPassword);
     strongPasswordStrength(passwordLength, poorPassword, weakPassword, strongPassword);
    }

     
   }else{
     
     passwordStrength.style.display = "none";
     passwordInfo.style.display = "none";
    
   }
 }

function poorPasswordStrength(passwordLength, poorPassword, weakPassword, strongPassword){

      if(passwordLength <= 3 && (poorPassword || weakPassword || strongPassword))
        {
       poor.classList.add("active");
       passwordInfo.style.display = "block";
       passwordInfo.style.color = "red";
       passwordInfo.textContent = "Your password is too Poor";
          
        }
}

function weakPasswordStrength(passwordLength, poorPassword, weakPassword, strongPassword){
   if(passwordLength>= 4 && poorPassword && (weakPassword || strongPassword))
    {
     weak.classList.add("active");
     passwordInfo.textContent = "Your password is Weak";
     passwordInfo.style.color = "orange";
   
   }else{
     weak.classList.remove("active");
     
   }
}

function strongPasswordStrength(passwordLength, poorPassword, weakPassword, strongPassword){

  if(passwordLength >= 6 && (poorPassword && weakPassword) && strongPassword)
    {
     poor.classList.add("active");
     weak.classList.add("active");
     strong.classList.add("active");
     passwordInfo.textContent = "Your password is strong";
     passwordInfo.style.color = "green";
   }else{
     strong.classList.remove("active");
     
   }
}

let showHide = document.querySelector('#passwordInput #showHide');

 showHide.onclick = function(){
      showHidePassword()
}

function showHidePassword(){
  if(passwordInput.type == "password"){
    passwordInput.type = "text";
    showHide.textContent = "HIDE";
    showHide.style.color = "green";
  }else{
    passwordInput.type = "password";
    showHide.textContent = "SHOW";
    showHide.style.color = "red";
  }
}


      </script>

4. Check Password Strength at a real time

After completing the previous steps, open the Page URL in the web browser on which you have added the password strength feature. then test the port, weak & strong password yourself by entering some text, numbers & special characters.