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 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>
