How to Check if Password is Strong or Weak using Javascript
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
, andbutton
). Thediv
element is just a wrapper for the rest of the elements. - The
button
element has“Check”
and theh1
element has“Result”
asinnerText
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
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
, andh1
elements usingdocument.querySelector()
method and stored them inbtnCheck
,input
, andresult
variables respectively. - We have attached a
click
event listener to thebutton
element. - In the event handler function, we are calling
isStrongPassword()
method and passing the value of theinput
element as a parameter. This method will verify password strength and set“Weak”
or“Strong”
asinnerText
of theh1
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 }