jQuery vérificateur de force de mot de passe

je suis assez nouveau à jQuery, et j'ai écrit une fonction simple pour vérifier la force d'un mot de passe pour chaque keypress.

L'idée est que chaque fois qu'un utilisateur entre un personnage, le contenu est évalué pour vérifier la force du mot de passe qu'ils ont saisi... Je suis sûr que tout le monde a vu ces avant.

quoi qu'il en soit, la logique que j'ai utilisée est qu'aucun mot de passe ne commence avec une valeur de 1. Lorsqu'un caractère minuscule est utilisé, le score augmente à 2. Quand un chiffre est utilisé les incréments de score par 1 de nouveau, même chose pour quand un caractère de majuscule est utilisé et quand le mot de passe devient 5 caractères ou plus long.

ce qui est retourné est la force du mot de passe jusqu'à 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 ressemble pas à jQuery... comme si je venais de faire du javascript. Je me posais aussi des questions sur ma logique. Ai-je fait tout ce que fait ou oublié quelque chose? Des suggestions de gens plus intelligents que moi?

toute suggestion ou conseil serait apprécié.

$(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);
        });
     });
32
demandé sur Evernoob 2009-09-07 14:17:01

14 réponses

La meilleure façon est de prendre un plugin existant comme TJB l'a suggéré.

en ce qui concerne votre question sur le code lui-même, une meilleure façon est de l'é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.)

24
répondu amitkaz 2016-03-21 02:06:33

je suggérerais d'évaluer un plugin de renforcement de mot de passe jQuery existant. (à moins que vous ne le fassiez simplement comme un exercice)

Voici quelques liens que j'ai 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

7
répondu TJB 2017-07-27 14:11:42

en plus de la réponse de gs, vous devriez vérifier le mot de passe par rapport aux mots communs du dictionnaire (en utilisant un hachage, probablement). Sinon un mot de passe faible comme 'Yellow1' sera évalué comme fort par votre logique.

2
répondu rjohnston 2009-09-07 10:39:46

Si vous faites du excersie

Référence: Indicateur De Force Du Mot De Passe

jQuery Code Utilisé (# indique quels ont changé de Benjamin code) 

$.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')});

});
2
répondu Sauron 2009-09-07 13:41:30
  • La longueur du mot de passe doit comporter au moins 8 caractères.
  • la force augmente avec la longueur, un mot de passe plus long devrait avoir plus de points.
  • incluez des caractères spéciaux comme # / " et similaires. (Ou n'importe quel autre que [a-Z0-9])
  • pour les mots de passe très longs, cette méthode peut être lente. Pourquoi ne pas tester chaque nouveau caractère et utiliser un dictionnaire pour lequel le mot de passe possède déjà des fonctionnalités.
1
répondu Georg Schölly 2009-09-07 10:26:47

vous pouvez essayer les plugins jQuery pour la vérification de la force du mot de passe

Certains d'entre eux sont

Mot De Passe Mètre De Force

Indicateur De Force Du Mot De Passe

1
répondu Sauron 2009-09-07 13:38:21

Dans le cas où 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:
				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:
    		weight = 7;
        extra = 4;
        break;
    case p.length>10 && p.length<=14:
    		weight = 6;
        extra = 3;
        break;
    case p.length>14 && p.length<=18:
    		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 calculera la force du mot de passe pour les mots de passe de 6 à 18 caractères de longueur. La valeur par défaut pour chaque caractère unique

  • 7 points Si mot de passe 6-10 caractères
  • 6 points Si mot de passe 10-14 caractères
  • 5 points Si mot de passe 14-18 les caractères

si un caractère est répété dans le mot de passe alors il perd 2 points pour chaque répétition.

des points Supplémentaires sont donnés lorsque les spécifications suivantes sont remplies:

  • mot de passe a au moins 6 chiffres (ajoute 2.5 ou 3 ou 4 points)
  • mot de passe a au moins 1 (ajoute 2.5 ou 3 ou 4 points)
  • mot de passe a au moins 1 caractère spécial (additionne 2.5 ou 3 ou 4 points)
  • mot de passe a au moins 1 caractère majuscule et 1 caractère minuscule (additionne 2.5 ou 3 ou 4 points)
1
répondu Peter Darmis 2016-09-18 10:24:48

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

découvrez le démo Ici

1
répondu M. Lak 2017-12-29 07:34:56

ci-dessous est un mot de passe libre de la force / politique jQuery plug-in validateur. Il prend également en charge la validation des mots de passe entrés dans plusieurs langues (pris en charge en Unicode). Il est multilingue.

mot de passe Politique / force jQuery plug-in Validator

0
répondu John Hopkins 2011-01-03 10:05:07

RnZ Code Labs facile à utiliser Mot De Passe Force plugin.

0
répondu Chris 2011-12-05 06:20:59

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

0
répondu terry 2012-08-31 03:29:21

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

j'ai trouvé le tutoriel ci-dessous avec belle démo:

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érons que ces jeu de logique pour résoudre le problème

0
répondu Anjan 2016-09-05 00:29:55

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>
0
répondu Umesh Shende 2017-02-18 09:36:51 

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:
				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:
    		weight = 7;
        extra = 4;
        break;
    case p.length>10 && p.length<=14:
    		weight = 6;
        extra = 3;
        break;
    case p.length>14 && p.length<=18:
    		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'));
0
répondu cittrarasu gk 2018-06-27 09:27:05