jQuery vérificateur de force de mot de passe

Question

Je suis assez nouveau à jQuery, et j'ai écrit une fonction simple pour vérifier la force d'un mot de passe pour chaque touche. L'idée est que chaque fois qu'un utilisateur entre un personnage, le contenu est évalué pour tester la force du mot de passe qu'il a saisi ... Je suis sûr que tout le monde a déjà vu ça. De toute façon, la logique que j'ai utilisée est qu'aucun mot de passe ne commence par une valeur de 1. Quand un caractère en minuscule est utilisé, le score augmente à 2. Quand un chiffre est utilisé, le score augmente de 1, même pour quand un caractère majuscule est utilisé et quand le mot de passe devient 5 caractères ou plus longtemps.

Ce qui est retourné est la force du mot de passe pour autant qu'une valeur de 1 à 5 chaque fois qu'une touche est pressée.

Donc, à propos de ma question. La façon dont je l'ai fait ne semble pas très jouteuse ... presque comme si je pouvais aussi bien faire du javascript. Aussi, je me posais des questions sur ma logique. Ai-je fait quelque chose ou négligé quelque chose? Des suggestions de personnes plus intelligentes que moi?

Des suggestions ou des conseils seraient appréciés.

$(document).ready(function(){ 

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

      var strength = 1; 

      /*length 5 characters or more*/ 
      if(this.value.length >= 5) { 
       strength++; 
      } 

      /*contains lowercase characters*/ 
      if(this.value.match(/[a-z]+/)) { 
       strength++; 
      } 

      /*contains digits*/ 
      if(this.value.match(/[0-9]+/)) { 
       strength++; 
      } 

      /*contains uppercase characters*/ 
      if(this.value.match(/[A-Z]+/)) { 
       strength++; 
      } 

      alert(strength); 
     }); 
    }); 

Answer 1

Le meilleur moyen est de prendre un plugin existant comme suggéré par TJB.

Quant à votre question sur le code lui-même, une plus belle façon est d'écrire comme ça:

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++; 
}); 

(modifié pour corriger les erreurs de syntaxe.)

Answer 2

• La longueur du mot de passe doit être d'au moins 8 caractères.
• La force augmente avec la longueur, un mot de passe plus long devrait avoir plus de points.
• Inclure des caractères spéciaux tels que #/"et autres (ou tout autre que [a-Z0-9])
• Pour les mots de passe très longs, cette méthode peut être lente. caractère et utiliser un dictionnaire pour qui comporte le mot de passe a déjà.

Answer 3

Je suggère d'évaluer un plugin force de mot de passe jQuery existant. (sauf si vous faites simplement comme un exercice)

Voici quelques liens I trouvé:

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

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

http://benjaminsterling.com/?p=117

Answer 4

En plus de la réponse de gs, vous devriez vérifier le mot de passe contre les mots courants (en utilisant un hachage, probablement). Sinon, un mot de passe faible comme 'Yellow1' sera évalué comme fort par votre logique.

Answer 5

Vous pouvez essayer les plugins jQuery pour vérifier la force du mot de passe

Certains d'entre eux sont

Password Strength Meter

Password Strength Indicator

Answer 6

si vous faites comme excersie

Référence: Password Strength Indicator

jQuery utilisées Code (# désigne ce qui a changé à partir du code de Benjamin)

$.fn.passwordStrength = function(options){ 
return this.each(function(){ 
    var that = this;that.opts = {}; 
    that.opts = $.extend({}, $.fn.passwordStrength.defaults, options); 

    that.div = $(that.opts.targetDiv); 
    that.defaultClass = that.div.attr('class'); 

    that.percents = (that.opts.classes.length) ? 100/that.opts.classes.length : 100; 

    v = $(this) 
    .keyup(function(){ 
     if(typeof el == "undefined") 
     this.el = $(this); 
     var s = getPasswordStrength (this.value); 
     var p = this.percents; 
     var t = Math.floor(s/p); 

     if(100 <= s) 
     t = this.opts.classes.length - 1; 

     this.div 
     .removeAttr('class') 
     .addClass(this.defaultClass) 
     .addClass(this.opts.classes[ t ]); 
    }) 
    # Removed generate password button creation 
}); 

function getPasswordStrength(H){ 
    var D=(H.length); 

    # Added below to make all passwords less than 4 characters show as weak 
    if (D<4) { D=0 } 


    if(D>5){ 
     D=5 
    } 
    var F=H.replace(/[0-9]/g,""); 
    var G=(H.length-F.length); 
    if(G>3){G=3} 
    var A=H.replace(/\W/g,""); 
    var C=(H.length-A.length); 
    if(C>3){C=3} 
    var B=H.replace(/[A-Z]/g,""); 
    var I=(H.length-B.length); 
    if(I>3){I=3} 
    var E=((D*10)-20)+(G*10)+(C*15)+(I*10); 
    if(E<0){E=0} 
    if(E>100){E=100} 
    return E 
} 


# Removed generate password function 
}; 

$(document) 
.ready(function(){ 
$('input[name="password2"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')}); 

}); 

Answer 7

Ci-dessous une force de mot de passe sans/JQuery politique plug-in validateur. Il prend également en charge la validation des mots de passe entrés dans plusieurs langues (pris en charge dans Unicode). C'est multilingue.

Password Policy/Strength JQuery plug-in Validator

Answer 8

RnZ Code Labs a un outil facile à utiliser Password Strength plugin.

Answer 9

vous pouvez essayer cette démo: http://www.gbin1.com/technology/democenter/20120903-jquery-plugin-complexify/, développée par jquery plugin complexify. Je pense que c'est cool!

Answer 10

Force d'un mot de passe doit être vérifié au nom de plusieurs paramètres tels que la présence de caractères spéciaux et des chiffres, la longueur du mot de passe, etc.

J'ai trouvé le tutoriel ci-dessous avec une belle démonstration:

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

le bloc de code jQuery:

$(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+'%'); 

    }); 

}); 

espère que ces ensemble de logique va résoudre le problème

Answer 11

Si vous ne souhaitez pas utiliser jQuery vous pouvez utiliser quelque chose comme ceci:

function strengthResult(p) { 
 
if(p.length<6 || p.length>18) { 
 
return 'Passwords must be 6-18 characters'; 
 
} 
 
var strength = checkStrength(p); 
 
switch(true) { 
 
    case strength<=30: 
 
     return 'Password "'+p+'" ('+strength+') is Very Weak'; 
 
     break; 
 
    case strength>30 && strength<=35: 
 
     return 'Password "'+p+'" ('+strength+') is Weak'; 
 
     break; 
 
    case strength>35 && strength<=50: 
 
     return 'Password "'+p+'" ('+strength+') is below Average'; 
 
     break;   
 
    case strength>50 && strength<=60: 
 
     return 'Password "'+p+'" ('+strength+') is almost Good'; 
 
     break; 
 
    case strength>60 && strength<=70: 
 
     return 'Password "'+p+'" ('+strength+') is Good'; 
 
     break; 
 
    case strength>70 && strength<=80: 
 
     return 'Password "'+p+'" ('+strength+') is Very Good'; 
 
     break; 
 
    case strength>80 && strength<=90: 
 
     return 'Password "'+p+'" ('+strength+') is Strong'; 
 
     break; 
 
    case strength>90 && strength<=100: 
 
     return 'Password "'+p+'" ('+strength+') is Very Strong'; 
 
     break; 
 
     default: 
 
\t \t \t \t return 'Error'; 
 
} 
 
} 
 
function strengthMap(w,arr) { 
 
var c = 0; 
 
var sum = 0; 
 
newArray = arr.map(function(i) { 
 
i = c; 
 
//sum += w-2*i; 
 
sum += w; 
 
c++; 
 
return sum; 
 
}); 
 
return newArray[c-1]; 
 
} 
 
function checkStrength(p){ 
 
var weight; 
 
var extra; 
 
switch(true) { 
 
    case p.length<6: 
 
     return false; 
 
     break; 
 
    case p.length>18: 
 
     return false; 
 
     break; 
 
    case p.length>=6 && p.length<=10: 
 
    \t \t weight = 7; 
 
     extra = 4; 
 
     break; 
 
    case p.length>10 && p.length<=14: 
 
    \t \t weight = 6; 
 
     extra = 3; 
 
     break; 
 
    case p.length>14 && p.length<=18: 
 
    \t \t weight = 5; 
 
     extra = 2.5; 
 
     break; 
 
} 
 
allDigits = p.replace(/\D+/g, ''); 
 
allLower = p.replace(/[^a-z]/g, ''); 
 
allUpper = p.replace(/[^A-Z]/g, ''); 
 
allSpecial = p.replace(/[^\W]/g, ''); 
 
if(allDigits && typeof allDigits!=='undefined') { 
 
dgtArray = Array.from(new Set(allDigits.split(''))); 
 
dgtStrength = strengthMap(weight,dgtArray); 
 
} else { 
 
dgtStrength = 0; 
 
} 
 
if(allLower && typeof allLower!=='undefined') { 
 
lowArray = Array.from(new Set(allLower.split(''))); 
 
lowStrength = strengthMap(weight,lowArray); 
 
} else { 
 
lowStrength = 0; 
 
} 
 
if(allUpper && typeof allUpper!=='undefined') { 
 
upArray = Array.from(new Set(allUpper.split(''))); 
 
upStrength = strengthMap(weight,upArray); 
 
} else { 
 
upStrength = 0; 
 
} 
 
if(allSpecial && typeof allSpecial!=='undefined') { 
 
splArray = Array.from(new Set(allSpecial.split(''))); 
 
splStrength = strengthMap(weight,splArray); 
 
} else { 
 
splStrength = 0; 
 
} 
 
strength = dgtStrength+lowStrength+upStrength+splStrength; 
 
if(dgtArray.length>0){ 
 
strength = strength + extra; 
 
} 
 
if(splStrength.length>0){ 
 
strength = strength + extra; 
 
} 
 
if(p.length>=6){ 
 
strength = strength + extra; 
 
} 
 
if(lowArray.length>0 && upArray.length>0){ 
 
strength = strength + extra; 
 
} 
 
return strength; 
 
} 
 
console.log(strengthResult('5@aKw1')); 
 
console.log(strengthResult('5@aKw13')); 
 
console.log(strengthResult('5@aKw13e')); 
 
console.log(strengthResult('5@aKw13eE')); 
 
console.log(strengthResult('5@aKw13eE!')); 
 
console.log(strengthResult('5@aKw13eE!,')); 
 
console.log(strengthResult('5@aKw13eE!,4')); 
 
console.log(strengthResult('5@aKw13eE!,4D')); 
 
console.log(strengthResult('5@aKw13eE!,4Dq')); 
 
console.log(strengthResult('5@aKw13eE!,4DqJ')); 
 
console.log(strengthResult('5@aKw13eE!,4DqJi')); 
 
console.log(strengthResult('5@aKw13eE!,4DqJi#')); 
 
console.log(strengthResult('5@aKw13eE!,4DqJi#7')); 
 
console.log(strengthResult('5@aKw13eE!,4DqJJ#7')); 
 
console.log(strengthResult('5@aKw33eE!,4DqJJ#7')); 
 

 
console.log(strengthResult('111111')); 
 
console.log(strengthResult('1111111')); 
 
console.log(strengthResult('11111111')); 
 
console.log(strengthResult('111111111')); 
 
console.log(strengthResult('1111111111')); 
 
console.log(strengthResult('11111111111')); 
 
console.log(strengthResult('111111111111')); 
 
console.log(strengthResult('1111111111111')); 
 
console.log(strengthResult('11111111111111')); 
 
console.log(strengthResult('111111111111111')); 
 
console.log(strengthResult('1111111111111111')); 
 
console.log(strengthResult('11111111111111111')); 
 
console.log(strengthResult('111111111111111111')); 
 

 
console.log(strengthResult('5@aKw33eE!,4DqJJ#71')); 
 
console.log(strengthResult('11111'));

l'extrait ci-dessus calcule la force de mot de passe pour les mots de passe de 6 à 18 caractères longueur. La valeur par défaut pour chaque caractère unique est

• de 7 points si le mot de passe 6-10 caractères
• de 6 points si le mot de passe 10-14 caractères
• sur 5 points si le mot de passe 14-18 caractères

Si un caractère est répété en mot de passe, il perd 2 points pour chaque répétition.

points supplémentaires sont donnés lorsque les spécifications suivantes sont réunies:

• mot de passe a au moins 6 chiffres (ajoute 2,5 ou 3 ou 4 points)
• mot de passe a au moins 1 Numéro (ajoute 2,5 ou 3 ou 4 points)
• mot de passe a au moins 1 caractère spécial (ajoute 2,5 ou 3 ou 4 points)
• passw ord présente au moins une majuscule et 1 caractère minuscule (ajoute 2,5 ou 3 ou 4 points)

Answer 12

meilleure façon est ce

function password_validate(txt) { 
 
    var val1 = 0; 
 
    var val2 = 0; 
 
    var val3 = 0; 
 
    var val4 = 0; 
 
    var val5 = 0; 
 
    var counter, color, result; 
 
    var flag = false; 
 
    if (txt.value.length <= 0) { 
 
    counter = 0; 
 
    color = "transparent"; 
 
    result = ""; 
 
    } 
 
    if (txt.value.length < 8 & txt.value.length > 0) { 
 
    counter = 20; 
 
    color = "red"; 
 
    result = "Short"; 
 
    } else { 
 
    document.getElementById(txt.id + "error").innerHTML = " "; 
 
    txt.style.borderColor = "grey"; 
 
    var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/; 
 
    // document.getElementById("pass_veri").style.display="block"; 
 
    var fletter = /[a-z]/; 
 
    if (fletter.test(txt.value)) { 
 
     val1 = 20; 
 

 
    } else { 
 
     val1 = 0; 
 
    } 
 
    //macth special character 
 
    var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/; 
 
    if (special_char.test(txt.value)) { 
 
     val2 = 30; 
 
    } else { 
 
     val = 0; 
 
    } 
 
    /*capital_letter*/ 
 
    var cap_lett = /[A-Z]/; 
 
    if (cap_lett.test(txt.value)) { 
 
     val3 = 20; 
 
    } else { 
 
     val = 0; 
 
    } 
 
    /*one numeric*/ 
 
    var num = /[0-9]/; 
 
    if (num.test(txt.value)) { 
 
     val4 = 20; 
 
    } else { 
 
     val4 = 0; 
 
    } 
 
    /* 8-15 character*/ 
 
    var range = /^.{8,50}$/; 
 
    if (range.test(txt.value)) { 
 
     val5 = 10; 
 
    } else { 
 
     val5 = 0; 
 
    } 
 
    counter = val1 + val2 + val3 + val4 + val5; 
 

 
    if (counter >= 30) { 
 
     color = "skyblue"; 
 
     result = "Fair"; 
 
    } 
 
    if (counter >= 50) { 
 
     color = "gold"; 
 
     result = "Good"; 
 
    } 
 
    if (counter >= 80) { 
 
     color = "green"; 
 
     result = "Strong"; 
 
    } 
 
    if (counter >= 90) { 
 
     color = "green"; 
 
     result = "Very Strong"; 
 
    } 
 
    } 
 
    document.getElementById("prog").style.width = counter + "%"; 
 
    document.getElementById("prog").style.backgroundColor = color; 
 
    document.getElementById("result").innerHTML = result; 
 
    document.getElementById("result").style.color = color; 
 
}

body { 
 
    font-family: 'Rajdhani', sans-serif; 
 
    background-color: #E4E4E4; 
 
} 
 

 

 
/* tooltip*/ 
 

 
.hint { 
 
    width: 258px; 
 
    background: red; 
 
    position: relative; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    position: absolute; 
 
    left: 0px; 
 
    border: 1px solid #CC9933; 
 
    background-color: #FFFFCC; 
 
    display: none; 
 
    padding: 20px; 
 
    font-size: 11px; 
 
} 
 

 
.hint:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 24px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 17px solid transparent; 
 
    border-bottom: 1px solid transparent; 
 
    border-left: 22px solid #CC9933; 
 
} 
 

 
.hint:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 26px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 14px solid transparent; 
 
    border-bottom: 1px solid transparent; 
 
    border-left: 20px solid #FFFFCC; 
 
} 
 

 
.parent { 
 
    position: relative; 
 
} 
 

 
.progress { 
 
    height: 7px; 
 
} 
 

 
#progres { 
 
    display: block; 
 
} 
 

 
p { 
 
    margin: 0px; 
 
    font-weight: normal; 
 
} 
 

 
.form-control { 
 
    width: none; 
 
    margin-left: 260px; 
 
    margin-top: 25px; 
 
    width: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="form-group col-lg-12 parent "> 
 
    <label class="hint" id="pass-hint"> 
 
    Password Strength:<span id="result"></span> 
 
    <br> 
 
    <div class="progress" id="progres"> 
 
     <div class="progress-bar progress-bar-danger" role="progressbar" id="prog"> 
 
     </div> 
 
    </div> 
 
    <p> passowrd must have atleast 8 charatcer</p> 
 
    </label> 
 
    <input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********" 
 
    oninput="password_validate(this);document.getElementById('progres').style.display='block';"> 
 
    <i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i> 
 
    <span id="passerror" class="help-block error"></span> 
 
</div>

Answer 13

Try ce code pour vérifier le mot de passe pour la zone de texte

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

Vérifiez la demo Here