Introduction
In today’s digital world, securing our online accounts is more important than ever. One crucial aspect of account security is choosing a strong password. But how can we determine if a password is strong or not? Fortunately, with the help of jQuery, a popular JavaScript library, we can easily implement a password strength checker on our web pages.
In this tutorial, we will walk you through the process of checking password strength using jQuery, empowering you to enhance the security of your users’ accounts.
How To Check Password Strength jQuery
function checkPasswordStrength() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
var password = $('#password').val().trim();
if (password.length < 6) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('weak-password');
$('#password-strength-status').html("Weak (should be atleast 6 characters.)");
} else {
if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('strong-password');
$('#password-strength-status').html("Strong");
}
else {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('medium-password');
$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}How To Build Check Password Strength With HTML
<div class="cxc-main-warap">
<form name="form" class="cxc-form" action="" method="post">
<div class="row">
<div class="cxc-group">
<input type="email" name="cxc-email" class="email cxc-control" placeholder="Enter Your Email Address">
</div>
</div>
<div class="row">
<div class="cxc-group">
<input type="text" name="cxc-password" class="cxc-pass cxc-control" placeholder="Enter Your Password">
</div>
<div class="cxc-group">
<input type="button" class="cxc-generate-pass" value="Generate Password">
</div>
</div>
<div class="row cxc-hidden cxc-strength-sec">
<div class="cxc-group">
<div class="cxc-strength-wrapper">
<div class="cxc-control cxc-strength"></div>
</div>
</div>
</div>
<div class="row">
<div class="cxc-group">
<input type="submit" name="cxc-signup" class="cxc-button" value="Sign Up">
</div>
</div>
</form>
</div>How To Build Check Password Strength With Css
<style type="text/css">
.cxc-main-warap .cxc-form .cxc-hidden{
display: none;
}
.cxc-main-warap form.cxc-form {
max-width: 600px;
margin: 0 auto;
width: 100%;
background: #abc9a140;
padding: 40px;
box-shadow: 5px 5px 0px #ff9f24;
border-radius: 10px;
}
.cxc-main-warap form.cxc-form input {
width: 100%;
display: block;
border: 1px solid #587052;
background: #fff;
border-radius: 5px;
}
.cxc-main-warap form.cxc-form .cxc-group {
width: 100%;
margin-bottom: 20px;
}
.cxc-main-warap form.cxc-form .row:last-child .cxc-group {
margin-bottom: 0;
}
.cxc-main-warap form.cxc-form .cxc-generate-pass:hover{
cursor: pointer;
}
.cxc-main-warap form.cxc-form .cxc-generate-pass{
background: #587052;
border-radius: 25px;
display: block;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #FFF;
border: 0;
cursor: pointer;
}
.cxc-main-warap form.cxc-form .cxc-button{
border: 1px solid #587052;
background: #fff;
border-radius: 25px;
display: block;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #000;
cursor: pointer;
}
</style>How To Build Check Password Strength With jQuery
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery(document).on('click', '.cxc-main-warap .cxc-form .cxc-generate-pass', function(){
var password = Array(20).fill('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$(+_*)^&@#')
.map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * x.length)]).join('');
jQuery(".cxc-pass").val(password);
validatePassword();
});
jQuery(document).on('keyup keydown keypress change',".cxc-main-warap .cxc-form .cxc-pass",function(){
validatePassword();
});
});
function validatePassword() {
var cxc_pass = jQuery(".cxc-main-warap .cxc-form .cxc-pass").val();
if( cxc_pass != "" ) {
jQuery(".cxc-strength-sec").removeClass('cxc-hidden');
if( cxc_pass.length <= 8 ) {
jQuery(".cxc-strength").css({ "background-color" : "#FF0000", "text-align" : "center", "color" : "#fff", 'border-radius' : '25px' }).text("Very Weak").animate({width:'100%'},300);
}
if( cxc_pass.length > 8 && ( cxc_pass.match(/[a-z]/ ) || cxc_pass.match(/\d+/) || cxc_pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) ){
jQuery(".cxc-strength").css({ "background-color" : "#abc9a1", "text-align" : "center", "color" : "#fff", 'border-radius' : '25px' }).text("Weak").animate({width:'100%'},300);
}
if( cxc_pass.length > 8 && ( ( cxc_pass.match(/[a-z]/) && cxc_pass.match(/\d+/) ) || ( cxc_pass.match(/\d+/) && cxc_pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) || ( cxc_pass.match(/[a-z]/) && cxc_pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) ) ) {
jQuery(".cxc-strength").css({ "background-color" : "#ffbc66", "text-align" : "center", "color" : "#fff", 'border-radius' : '25px' }).text("Good").animate({width:'100%'},300);
}
if( cxc_pass.length > 8 && cxc_pass.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,24}$/) ) {
jQuery(".cxc-strength").css({ "background-color" : "#587052", "text-align" : "center", "color" : "#fff", 'border-radius' : '25px' }).text("Strong").animate({width:'100%'},300);
}
} else {
jQuery(".cxc-strength").animate({ width:'100%'},300);
jQuery(".cxc-strength-sec").addClass('cxc-hidden');
}
}
</script>Was this article helpful?
YesNo
