Create simple password strength check using JavaScript

In this post, we are going to a create a simple password strength checker using javascript. When the password is met with a certain condition, the progress bar will increase to some extent and if all conditions are fulfilled the progress bar will fill up to complete 100%, indicating that the password is very strong. Its implementation is very simple and can be integrated into any of your projects easily. Now let’s see the complete code for Password Check JavaScript Tutorial

Password Check JavaScript Tutorial

password check javascript tutorial

The Complete Code –¬†Javascript password check


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password Strength</title>
</head>
<body style="background-color: aliceblue;">
<h1>Password Strength</h1>
<label>Enter Password: </label><input type="text" autocomplete="none" id="password">

<progress max="100" value="0" id="strength" style="width: 150px"></progress>

</body>
<script type="text/javascript">
var pass = document.getElementById("password")
pass.addEventListener('keyup', function(){
checkPassword(pass.value)
})
function checkPassword(password) {
var strengthBar = document.getElementById('strength')
var strength = 0;
if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)){
strength += 1
}
if (password.match(/[~<>?]+/)){
strength += 1
}
if (password.match(/[!@$%^&*()]+/)){
strength += 1
}
if (password.length > 5){
strength += 1
}

switch(strength) {
case 0:
strengthBar.value = 20;
break
case 1:
strengthBar.value = 40;
break
case 2:
strengthBar.value = 60;
break
case 3:
strengthBar.value = 80;
break
case 4:
strengthBar.value = 100;
break
}
}
</script>
</html>

So, in this, we are taking the password inputted and matching it against our own criteria. So using regular expressions we are check if the password contains a certain set of characters or not. Next using switch case we are checking if it matches how many conditions. For example, if it matches to only one condition then password strength will be 20% filled only and if it matches all the criteria then password strength bar will up to 100%. So that very simple to achieve and it can be easily used inside any project.

Leave a Reply