JQuery, qui est un nouveau venu, a écrit une fonction simple pour vérifier la force d'un mot de passe pour chaque pression de touche.
L'idée est que chaque fois qu'un utilisateur entre un caractère, son contenu est évalué pour tester la force du mot de passe entré. Je suis sûr que tout le monde l'a déjà vu.
Quoi qu’il en soit, la logique que j’ai utilisée est qu’aucun mot de passe ne commence par la valeur 1. Lorsqu'un caractère minuscule est utilisé, le score passe à 2. Lorsqu'un chiffre est utilisé, le score incrémente de nouveau de 1, de même que pour un caractère est utilisé et lorsque le mot de passe devient 5 caractères ou plus.
Ce qui est renvoyé, c'est la force du mot de passe jusqu'à une valeur de 1 à 5 chaque fois que vous appuyez sur une touche.
Donc, à propos de ma question. La façon dont je l'ai fait ne me semble pas très jQuery ... presque comme si j'avais aussi bien fait de javascript. De plus, je me posais des questions sur ma logique. Ai-je fait quelque chose de 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);
});
});
Le meilleur moyen est de prendre un plugin existant comme suggéré par TJB.
En ce qui concerne votre question sur le code lui-même, une meilleure façon de l'écrire est la suivante:
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.)
Je suggérerais d'évaluer un plugin de force de mot de passe jQuery existant. (sauf si c'est juste un exercice)
Voici quelques liens que j'ai trouvés:
http://www.visual-blast.com/javascript/password-strength-checker/
http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/
En plus de la réponse de gs, vous devriez vérifier le mot de passe par rapport aux mots courants du dictionnaire (avec un hachage, probablement). Sinon, un mot de passe faible comme "Yellow1" sera considéré comme fort par votre logique.
Si vous faites de l'exercice
Référence: Indicateur d'intensité du mot de passe
code jQuery utilisé (# indique ce qui a changé depuis le 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')});
});
Si vous ne voulez 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. La valeur par défaut pour chaque caractère unique est
Si un caractère est répété dans le mot de passe, il perd 2 points pour chaque répétition.
Des points supplémentaires sont accordés lorsque les spécifications suivantes sont remplies:
Trouvez le code complet ci-dessous:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.complexify.min.js"></script>
HTML:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h4> Password strength check with jquery</h4>
<label>Enter Storng Password: </label>
<input type="password" id="pwd"><br/>
<progress style="margin-left:20%" value="0" max="100" id="pg"></progress> <span id="cpx">0%</span>
</div>
Scénario
$(function(){
$("#pwd").complexify({}, function(valid, complexity){
//console.log("Password complexity: " + Math.round(complexity));
$("#pg").val(Math.round(complexity));
$("#cpx").html(Math.round(complexity)+'%');
});
});
Veuillez compléter le code source de travail ici
Vous pouvez essayer les plugins jQuery pour vérifier la force du mot de passe
Certains d'entre eux sont
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 la démo ici
meilleur moyen 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>
Vous trouverez ci-dessous un validateur de force/stratégie de mot de passe gratuit pour le plug-in JQuery. Il prend également en charge la validation des mots de passe saisis dans plusieurs langues (pris en charge par Unicode). C'est multilingue.
Stratégie de mot de passe/Validateur du plug-in JQuery Strength
vous pouvez essayer cette démo: http://www.gbin1.com/technology/democenter/20120903-jquery-plugin-complexify/ , développé par le plugin jquery complexify. Je pense que c'est cool!
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'));
La force d'un mot de passe doit être vérifiée pour le compte de plusieurs paramètres tels que la présence de caractères spéciaux et de chiffres, la longueur du mot de passe, etc.
J'ai trouvé le tutoriel ci-dessous avec la démo de Nice:
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 cet ensemble de logique résoudra le problème
RnZ Code Labs a un facile à utiliser Mot de passe - plugin.