jQuery password strength checker

后端 未结 13 1988
遥遥无期
遥遥无期 2020-12-08 00:25

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

13条回答
  •  無奈伤痛
    2020-12-08 01:03

    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

提交回复
热议问题