How to Check Password Strength with JavaScript, CSS and jQuery

How to Check Password Strength with JavaScript, CSS and jQuery

Password is most important way to secure your data.If password is weak in not so strong anybody can access your data it is very important to create a secure password wherever you need. In this post, we will create a Password Strength Checker using JavaScript,jQuery and CSS.

Password is most important way to secure your data.If password is weak in not so strong anybody can access your data it is very important to create a secure password wherever you need.In this tutorial we will learning "How to Check Password Strength with JavaScript, CSS and jQuery "

This is image title

To create a Password Strength Checker Using JavaScript,jQuery and CSS it takes only two steps:-

1. Make a HTML file and define markup and script for Password Strength Checker

We make a HTML file and save it with a name password.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="password_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#pass").keyup(function(){
  check_pass();
 });
});

function check_pass()
{
 var val=document.getElementById("pass").value;
 var meter=document.getElementById("meter");
 var no=0;
 if(val!="")
 {
  // If the password length is less than or equal to 6
  if(val.length<=6)no=1;

  // If the password length is greater than 6 and contain any lowercase alphabet or any number or any special character
  if(val.length>6 && (val.match(/[a-z]/) || val.match(/\d+/) || val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)))no=2;

  // If the password length is greater than 6 and contain alphabet,number,special character respectively
  if(val.length>6 && ((val.match(/[a-z]/) && val.match(/\d+/)) || (val.match(/\d+/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) || (val.match(/[a-z]/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))))no=3;

  // If the password length is greater than 6 and must contain alphabets,numbers and special characters
  if(val.length>6 && val.match(/[a-z]/) && val.match(/\d+/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))no=4;

  if(no==1)
  {
   $("#meter").animate({width:'50px'},300);
   meter.style.backgroundColor="red";
   document.getElementById("pass_type").innerHTML="Very Weak";
  }

  if(no==2)
  {
   $("#meter").animate({width:'100px'},300);
   meter.style.backgroundColor="#F5BCA9";
   document.getElementById("pass_type").innerHTML="Weak";
  }

  if(no==3)
  {
   $("#meter").animate({width:'150px'},300);
   meter.style.backgroundColor="#FF8000";
   document.getElementById("pass_type").innerHTML="Good";
  }

  if(no==4)
  {
   $("#meter").animate({width:'200px'},300);
   meter.style.backgroundColor="#00FF40";
   document.getElementById("pass_type").innerHTML="Strong";
  }
 }

 else
 {
  meter.style.backgroundColor="white";
  document.getElementById("pass_type").innerHTML="";
 }
}
</script>
</head>
<body>

<p id="heading">Password Strength Checker Using jQuery and CSS</p>
<input type="password" id="pass" placeholder="Enter Your Password">
<div id="meter_wrapper">
 <div id="meter"></div>
</div>
<br>

<span id="pass_type"></span>

</body>
</html>

In this step we use Regular Expression to find the Password Strength.We use three regular expressions:-

  • val.match(/[a-z]/) is used to find whether the password contain any alphabet.
  • val.match(/\d+/) is used to find whether the password contain any number.
  • val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) is used to find whether the password contain any special characters.

We use jQuery Animate to create animation on password strength.

2. Make a CSS file and define styling for Password Strength Checker

We make a CSS file and save it with name password_style.css.

body
{
 font-family:helvetica;
}
#heading
{
 margin-top:150px;
 text-align:center;
 font-size:27px;
 color:#2E2EFE;
}
#pass
{
 margin-left:25%;
 height:45px;
 width:500px;
 border-radius:3px;
 border:1px solid grey;
 padding:10px;
 font-size:18px;
}
#meter_wrapper
{
 border:1px solid grey;
 margin-left:38%;
 margin-top:20px;
 width:200px;
 height:35px;
 border-radius:3px;
}
#meter
{
 width:0px;
 height:35px;
 border-radius:
}
#pass_type
{
 font-size:20px;
 margin-top:20px;
 margin-left:45%;
 text-align:center;
 color:grey;
}

Thats all, this is how to Password Strength Checker using jQuery and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Thank you for reading ! If you liked this post, share it with all of your programming buddies!

JavaScript CSS jQuery Password

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How To Validate Password And Confirm Password Using JQuery

how to validate password and confirm password using jQuery, validation in php, how to validate password in jquery, validate password and confirm password in jquery, password and confirm password validation using jquery, how to check password and confirm password in jquery validation, validation for password and confirm password in jquery,

How To Check Password Strength Using JQuery

how to check password strength using jQuery, how to check password size using javascript, jQuery password strength, jQuery form validation with password strength check, Password strength verification using jQuery, jquery password validation, check password length in jquery, jquery check password match

How To Check Password Strength Using JQuery

how to check password strength using jQuery, how to check password size using javascript, jQuery password strength, jQuery form validation with password strength check, Password strength verification using jQuery, jquery password validation, check password length in jquery, jquery check password match

Random Password Generator Using JavaScript, HTML & CSS

Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, symbols, ...

JavaScript Password Generator

In this video, I will be showing you how to build a password generator in JavaScript 🔴 Subscribe for more https://www.youtube.com/channel/UCMA8gVyu_IkVIixXd2...