password weakness checker
// timeout before a callback is called
let timeout;
// traversing the DOM and getting the input and span using their IDs
let password = document.getElementById('PassEntry')
let strengthBadge = document.getElementById('StrengthDisp')
// The strong and weak password Regex pattern checker
let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')
function StrengthChecker(PasswordParameter){
// We then change the badge's color and text based on the password strength
if(strongPassword.test(PasswordParameter)) {
strengthBadge.style.backgroundColor = "green"
strengthBadge.textContent = 'Strong'
} else if(mediumPassword.test(PasswordParameter)){
strengthBadge.style.backgroundColor = 'blue'
strengthBadge.textContent = 'Medium'
} else{
strengthBadge.style.backgroundColor = 'red'
strengthBadge.textContent = 'Weak'
}
}
// Adding an input event listener when a user types to the password input
password.addEventListener("input", () => {
//The badge is hidden by default, so we show it
strengthBadge.style.display= 'block'
clearTimeout(timeout);
//We then call the StrengChecker function as a callback then pass the typed password to it
timeout = setTimeout(() => StrengthChecker(password.value), 500);
//Incase a user clears the text, the badge is hidden again
if(password.value.length !== 0){
strengthBadge.style.display != 'block'
} else{
strengthBadge.style.display = 'none'
}
});
3.67
6
<html>
<head>
<!-- Bootstrap 5 link -->
<link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS Styling -->
<style>
.passwordInput{
margin-top: 5%;
text-align :center;
}
.displayBadge{
margin-top: 5%;
display: none;
text-align :center;
}
</style>
</head>
<body>
<div class="d-flex text-danger justify-content-center">
<h4 style="margin-top: 10%; text-align :center">
Password Strength Checker
</h4>
<br>
<input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
<br>
<span id="StrengthDisp" class="badge displayBadge">Weak</span>
<br>
</div>
</body>
</html>
Thank you!
6
0
Are there any code examples left?
New code examples in category Html