How to make Password Strength meter using JS: A detail look on making a JavaScript password strength meter

weak password

Weak Password


medium password

medium Password


What is a password strength meter?

Password strength meter shows how good and safe a given password might be. Our Password strength meter checks for sequences of characters being used for example combination of letter, numbers and symbols


A quick overview of our Blog (JS password strength meter)

In this example you can learn, how to check password strength using HTML, CSS and JS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page. If you are having any problem viewing the code just refresh the page Password strength meter is a lightweight and easy-to-use JS code that creates a Password strength meter for you. In this blog, there are four sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the Password strength meter made with HTML, CSS and JS, after that you can copy the code and paste it [that's the fourth section]


You might like this :

Budget Calculator - using JS (JavaScript) and Bootstrap
Few days ago
Show current time using JS
Few days ago
DIV ANIMATION with the help of HTML5 AND CSS
Few days ago
Email Validation using HTML, CSS and JavaScript
Few days ago
Change Color of Div onclick
Few days ago

This is an example


Your Password here


Submit



HTML Code

<!DOCTYPE html>
<html>
<head>
<title>How to make Password Strength meter using JS - Code With Bishal</title>
</head>
/* by Code With Bishal - www.codewithbishal.com*/
<body>
<form action="#">
<input onkeyup="cwb()" type="password" placeholder="Type password" class="form-control">
<a href="#" type="button" class="cwb2 btn btn-primary">Submit</a>
<div class="cwb">
<span class="weak"></span>
<span class="medium"></span>
<span class="strong"></span>
</div>
<div class="text"></div>
</form>
</body>
</html>
Copy Contents

CSS Code

<style>
form .text.weak{
color: #ff4757;
cursor: pointer;
}

form .text.medium{
color: orange;
cursor: pointer;
}
form .text.strong{
color: #23ad5c;
cursor: pointer;
}
.cwb2{
margin: 20px;
margin-left: 600px;
}
.text{
margin-left: 400px;
font-size: 30px;
}
@media (max-width: 767px) {
.cwb2{
margin-left: 120px;
}
.text{
margin-left: 50px;
}
}
</style>
Copy Contents

JS(Javascript) Code

<script>
const input = document.querySelector("input");
const weak = document.querySelector(".weak");
const medium = document.querySelector(".medium");
const strong = document.querySelector(".strong");
const text = document.querySelector(".text");
const btn = document.querySelector(".cwb2");
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
function cwb(){
if(input.value != ""){
if(input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong)))no=1;
if(input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong))))no=2;
if(input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong))no=3;
if(no==1){
text.textContent = "Your password is too week";
text.classList.add("weak");
btn.classList.add("disabled");
}
if(no==2){
text.textContent = "Your password is medium";
text.classList.add("medium");
btn.classList.remove("disabled");
}else{
medium.classList.remove("active");
text.classList.remove("medium");
}
if(no==3){
text.textContent = "Your password is strong";
text.classList.add("strong");
btn.classList.remove("disabled");
}else{
strong.classList.remove("active");
text.classList.remove("strong");
}
}
}
</script>
Copy Contents