JSFiddle - React, Tailwind, and code Playground

by envira

HTML

Password:<br />
<input id="txtpassword" name="txtpassword" type="password" value="" /><span id="passError"></span>
<br />
<div  id="strength" class='strength0'></div>

CSS

#txtpassword {
    border: 1px solid #AAA;
    width: 248px;
}
#txtpassword, #strength {
    margin: 5px;  
}
#strength {
    display: block;
     height: 3px;
}
.strength0
{
    width:250px;
    background:#CCC;
}

            .strength1
            {
                width:50px;
                background:#ff0000;
            }

            .strength2
            {
                width:100px;
                background:#ff5f5f;
            }

            .strength3
            {
                width:150px;
                background:#56e500;
            }

            .strength4
            {
                background:#4dcd00;
                width:200px;
            }

            .strength5
            {
                background:#399800;
                width:250px;
            }

JavaScript

$("#txtpassword").keyup(function(){
    var desc = new Array();
    desc[0] = "Very Weak";
    desc[1] = "Weak";
    desc[2] = "Better";
    desc[3] = "Medium";
    desc[4] = "Strong";
    desc[5] = "Strongest";
    var score   = 0;
    var passMin = 3; // Change or load through settings
    var passLen = $(this).val().length;
    
    $('#strength').removeClass().addClass('strength0');
    if( passLen < passMin ){
      $('#passError').html('Please enter '+(passMin-passLen)+' more character(s).');
    } else {
        //if txtpass bigger than 6 give 1 point
        if(passLen > 6) score++;
        
        //if txtpass has both lower and uppercase characters give 1 point
        if(this.value.match(/[a-z]/) && this.value.match(/[A-Z]/)) score++;

        //if txtpass has at least one number give 1 point
        if (this.value.match(/\d+/)) score++;
        
        //if txtpass has at least one special caracther give 1 point
        if (this.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
        
        //if txtpass bigger than 12 give another 1 point
        if(passLen > 12) score++;
        
        $('#passError').html('Strength: '+desc[score]);
        $('#strength').removeClass().addClass('strength'+score);
    }
});