Password Strength Checker Using JavaScript,jQuery and CSS
Last Updated : Apr 15, 2022
IN - JavaScript jQuery 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 create a Password Strength Checker using JavaScript,jQuery and CSS.You may also like jQuery email and password validation.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To create a Password Strength Checker Using JavaScript,jQuery and CSS it takes only two steps:-
- Make a HTML file and define markup and script for Password Strength Checker
- Make a CSS file and define styling for Password Strength Checker
Step 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. You may also like generate random password using PHP and MySQL.
Step 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.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery