jQuery password strength checker

Question

I\'m quite new to jQuery, and I\'ve written a simple function to check the strength of a password for each keypress.

The idea is that every time a user enters a char

Answer 1

Strength of a password should be checked on behalf of several parameters like the presence of special characters and numbers, length of the password etc.

I have found the below tutorial with nice demo:

http://tinytute.com/2014/06/03/animated-password-strength-checker-quick-easy/

The jQuery code block:

$(document).ready(function(){

    $("#textBox").keyup(function(){

        var passWord = $("#textBox").val();
        var passLength = passWord.length;
        var specialFlag = 0;
        var numberFlag = 0;
        var numberGenerator = 0;
        var total = 0;

        if(/^[a-zA-Z0-9- ]*$/.test(passWord) == false) {

            specialFlag =20;
        }


        if(passWord.match(/[0-9]/)) {

            numberFlag = 25;
        }

        if(passLength>4&&passLength<=6){
            numberGenerator =25;
        }else if(passLength>=7&&passLength<=9){
            numberGenerator =35;
        }else if(passLength>9){
            numberGenerator =55;
        }else if(passLength>0&&passLength<=4){
            numberGenerator =15;
        }else{
            numberGenerator =0;
        }

        total = numberGenerator + specialFlag + numberFlag;
        if(total<30){
            $('#progressBar').css('background-color','#CCC');
        }else if(total<60&&total>=30){

            $('#progressBar').css('background-color','#FF6600');

        }else if(total>=60&&total<90){

            $('#progressBar').css('background-color','#FFCC00');

        }else if(total>=90){

            $('#progressBar').css('background-color','#0f0');

        }
        $('#progressBar').css('width',total+'%');

    });

});

Hope these set of logic will solve the problem

Answer 2

The best way is to take an existing plugin as TJB suggested.

As to your question about the code itself, a nicer way is to write it like that:

var pass = "f00Bar!";

var strength = 1;
var arr = [/.{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.map(arr, function(regexp) {
  if(pass.match(regexp))
     strength++;
});

(Modified to correct syntax errors.)

Answer 3

You can try the jQuery plugins for password strength check

Some of them are

Password Strength Meter

Password Strength Indicator

Answer 4

I would suggest evaluating an existing jQuery password strength plugin. (unless your just doing it as an exercise)

Here are a few links I found:

http://www.visual-blast.com/javascript/password-strength-checker/

http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/

Answer 5

Below is a free password strength/policy JQuery plug-in validator. It is also supports validation of passwords entered in multiple languages (supported in Unicode). It is multilingual.

Password Policy/Strength JQuery plug-in Validator

Answer 6

Try this code to check the password for text box

<script>
$(document).ready(function()
{
$('#pwd').keyup(function()
{
$('#strength_message').html(checkStrength($('#pwd').val()))
}) 
function checkStrength(password)
{
var strength = 0
if (password.length < 6) { 
$('#strength_message').removeClass()
$('#strength_message').addClass('short')
return 'Too short' 
}

if (password.length > 7) strength += 1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (strength < 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('weak')
return 'Weak'   
}
else if (strength == 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('good')
return 'Good'  
}
else
{
$('#strength_message').removeClass()
$('#strength_message').addClass('strong')
return 'Strong'
}
}
});
</script>

Html:

   <center><form id="password-strength">
    <label>Password : </label>
    <input name="pwd" id="pwd" type="password"/>
    <span id="strength_message"></span>
    </form><br/>

Check out the demo Here