2009-09-07 19 views
32

Soy bastante nuevo en jQuery, y he escrito una función simple para comprobar la fuerza de una contraseña para cada pulsación de tecla.jQuery comprobador de fuerza de contraseñas

La idea es que cada vez que un usuario ingresa a un personaje, los contenidos se evalúan para probar la fuerza de la contraseña que ingresaron ... Estoy seguro de que todos los han visto antes.

De todos modos, la lógica que he utilizado es que ninguna contraseña comienza con un valor de 1. Cuando se utiliza un carácter en minúscula, la puntuación aumenta a 2. Cuando se usa un dígito, la puntuación aumenta en 1 de nuevo, mismo para cuando se usa un carácter en mayúscula y cuando la contraseña tiene 5 o más caracteres de longitud.

Lo que se devuelve es la fuerza de la contraseña hasta un valor del 1 al 5 cada vez que se pulsa una tecla.

Entonces, sobre mi pregunta. La forma en que lo hice no parece muy jQuery como ... casi como si acabara de hacer Javascript directamente. También me preguntaba acerca de mi lógica. ¿He hecho algo o pasado algo por alto? ¿Alguna sugerencia de gente más inteligente que yo?

Cualquier sugerencia o consejo sería apreciado.

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

+1 – karim79

+1

gran pregunta para un más sofisticado evaluador de la contraseña, véase: http://stackoverflow.com/questions/948172/password -fuerza-metro/11268104 # 11268104 –

Respuesta

22

La mejor manera es tomar un plugin existente como sugirió TJB.

En cuanto a su pregunta sobre el código en sí mismo, una forma más agradable es escribir de esa manera:

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

(modificado para corregir los errores de sintaxis.)

+0

¿Puede explicar lo que hace esto: '/ {5 \,} /' – yckart

+1

Debe ser '/. {5,} /'. La coma significa "sin límite superior". Sin la coma, intentaría hacer coincidir exactamente 5 caracteres. –

1
  • La longitud de la contraseña debe tener al menos 8 caracteres.
  • La fuerza aumenta con la longitud, una contraseña más larga debería tener más puntos.
  • Incluye caracteres especiales como #/"y similares. (O simplemente cualquier otro que no sea [a-Z0-9])
  • Para contraseñas realmente largas, este método puede ser lento. ¿Por qué no solo prueba cada nuevo carácter y usar un diccionario para el que cuenta con la contraseña ya tiene.
2

Encima de respuesta gs', usted debe comprobar la contraseña contra las palabras comunes del diccionario (usando un hash, probablemente). De lo contrario, una contraseña débil como 'Yellow1' será evaluada como fuerte por su lógica.

2

si se está haciendo como excersie

Referencia: Password Strength Indicator

Código jQuery Se utiliza (# indica lo han cambiado a partir del código 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')}); 

}); 
0

A continuación se muestra una fortaleza de la contraseña libre/Política jQuery plug-in de validación. También es compatible con la validación de contraseñas ingresadas en múltiples idiomas (compatible con Unicode). Es multilingüe

Password Policy/Strength JQuery plug-in Validator

0

fuerza de una contraseña debe comprobarse en nombre de varios parámetros como la presencia de números y caracteres especiales, longitud de la contraseña, etc.

he encontrado el tutorial de abajo con una bonita demostración:

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

el bloque de código 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+'%'); 

    }); 

}); 

esperanza este conjunto de lógica va a resolver el problema

1

En caso de que no desee utilizar jQuery se puede usar algo como esto:

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('[email protected]')); 
 
console.log(strengthResult('[email protected]')); 
 
console.log(strengthResult('[email protected]')); 
 
console.log(strengthResult('[email protected]')); 
 
console.log(strengthResult('[email protected]!')); 
 
console.log(strengthResult('[email protected]!,')); 
 
console.log(strengthResult('[email protected]!,4')); 
 
console.log(strengthResult('[email protected]!,4D')); 
 
console.log(strengthResult('[email protected]!,4Dq')); 
 
console.log(strengthResult('[email protected]!,4DqJ')); 
 
console.log(strengthResult('[email protected]!,4DqJi')); 
 
console.log(strengthResult('[email protected]!,4DqJi#')); 
 
console.log(strengthResult('[email protected]!,4DqJi#7')); 
 
console.log(strengthResult('[email protected]!,4DqJJ#7')); 
 
console.log(strengthResult('[email protected]!,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('[email protected]!,4DqJJ#71')); 
 
console.log(strengthResult('11111'));

el fragmento anterior calculará de la contraseña para las contraseñas de 6 a 18 caracteres en longitud. El valor por defecto para cada carácter único es

  • 7 puntos si la contraseña de 6-10 caracteres
  • 6 puntos si la contraseña de 10-14 caracteres
  • 5 puntos si la contraseña de 14-18 caracteres

Si se repite un carácter en la contraseña, pierde 2 puntos por cada repetición.

puntos adicionales se dan cuando se cumplen las siguientes especificaciones:

  • contraseña tiene al menos 6 dígitos (añade 2,5 o 3 o 4 puntos)
  • contraseña tiene al menos 1 número (añade 2,5 o 3 o 4 puntos)
  • contraseña tiene al menos 1 carácter especial (añade 2,5 o 3 o 4 puntos)
  • passw ord tiene al menos 1 mayúscula y 1 minúscula carácter (añade 2,5 o 3 o 4 puntos)
0

mejor manera es este

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

Try este código para verificar la contraseña para el cuadro de texto

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

Mira la demo Here

Cuestiones relacionadas