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's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Password Show Hide Button with HTML CSS & Javascript

Password Show Hide Button with HTML CSS & Javascript - Today in this video you'll learn how to create a Password Show or Hide Button using HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Form using HTML & CSS. But there aren't a password show hide button/features. Now it's time to create a Password Show Hide Button.

Building a minesweeper game using Javascript, HTML and CSS

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

Login Form using HTML CSS & JavaScript | Password Show and Hide Toggle Button

In this video you'll learn how to create a Cool Login Form with Password Show or Hide Option in HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Login Form but there is no password show hide option. Now, it's a time to create Login Form with password show or hide Button.

How to Create an autoplay Testimonial Slider with jQuery and CSS

How we can create a testimonial slider using jQuery and CSS? Solution: Responsive Testimonial Slider With jQuery and CSS, an Automated Slider which slides automatically.

Material Login & Signup Form with CSS, HTML and JavaScript

How we can create a login and signup form with the material design using HTML CSS JavaScript? Solution: See this CSS Material Login & Signup Form With jQuery, Material Design Form.