2009-09-07 5 views
32

Я довольно новичок в jQuery, и я написал простую функцию, чтобы проверить силу пароля для каждого нажатия клавиши.jQuery проверка прошивки пароля

Идея состоит в том, что каждый раз, когда пользователь вводит символ, содержимое оценивается, чтобы проверить силу пароля, который они ввели ... Я уверен, что все это видели раньше.

Как бы то ни было, логика, которую я использовал, состоит в том, что пароль не начинается со значения 1. При использовании символа нижнего регистра счет увеличивается до 2. Когда используется цифра, счет увеличивается на 1 снова, когда используется символ верхнего регистра и когда пароль становится 5 или более символов.

Возврат - это сила пароля при значении от 1 до 5 при каждом нажатии клавиши.

Итак, о моем вопросе. То, как я это делал, похоже не очень похоже на jQuery ... почти так же, как я, возможно, просто сделал прямое javascript. Также мне было интересно узнать о моей логике. Я что-то сделал или что-то пропустил? Любые предложения от более умных людей, чем я?

Любые предложения или рекомендации будут оценены.

$(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

для более сложной силы пароля оценщиком см: http://stackoverflow.com/questions/948172/password -strength-meter/11268104 # 11268104 –

ответ

22

Лучшим способом является использование существующего плагина, предлагаемого TJB.

Что касается Вашего вопроса о самом коде, более хороший способ, чтобы написать это так:

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

(Modified для исправления ошибок синтаксиса.)

+0

Можете ли вы объяснить, что это делает: '/ {5 \,} /' – yckart

+1

Это должно быть '/. {5,} /'. Запятая означает «нет верхнего предела». Без запятой он попытался бы совместить ровно 5 символов. –

1
  • Длина пароля должна быть не менее 8 символов.
  • Сила увеличивается с длиной, более длинный пароль должен иметь больше очков.
  • Включить специальные символы, такие как #/"и т. Д. (Или только любые, кроме [a-Z0-9])
  • Для действительно длинных паролей этот метод может замедляться. Почему бы вам просто не тестировать все новые характер и использовать словарь, для которого имеется пароль уже есть.
7

Я хотел бы предложить оценку существующего Jquery силы пароля плагина. (если ваши просто не делает это в качестве упражнения)

Вот несколько ссылок I найдено:

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

2

На вершине ответ Gs', вы должны проверить пароль против общих словарных слов (с использованием хэш, вероятно). В противном случае слабый пароль, такой как «Желтый», будет оценен как сильный по вашей логике.

2

Если вы делаете, как excersie

Ссылка: Password Strength Indicator

JQuery код, используемый (# означает, что изменилось с кодом Беньямина)

$.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

Ниже свободная сила пароля/политика JQuery плагин валидатор. Он также поддерживает проверку паролей, введенных на нескольких языках (поддерживается в Unicode). Он многоязычный.

Password Policy/Strength JQuery plug-in Validator

0

Сила пароля должен быть проверен от имени нескольких параметров, как наличие специальных символов и цифр, длина пароля и т.д.

Я нашел ниже учебник с хорошими демо:

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

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

    }); 

}); 

Надежда это набор логики будет решать Проблема

1

В случае, если вы не хотите использовать JQuery вы можете использовать что-то вроде этого:

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'));

выше фрагмент кода рассчитает силы пароля для паролей от 6 до 18 символов длина. Значение по умолчанию для каждого уникального характера

  • 7 баллов если пароль 6-10 символов
  • 6 очков если пароль 10-14 символов
  • 5 баллов если пароль 14-18 символов

Если символ повторяется в пароле, он теряет 2 балла за каждое повторение.

Дополнительные точки даны, когда следующие спецификации будут выполнены:

  • пароль имеет по крайней мере 6 цифр (добавляет 2,5 или 3, или 4 балла)
  • пароль имеет по крайней мере 1 номер (добавляет 2,5 или 3, или 4 балла)
  • пароль имеет, по меньшей мере, 1 специальный символ (добавляет 2,5 или 3 или 4 балла)
  • PASSW Ord имеет, по меньшей мере, 1 верхнего регистра и 1 нижнего регистра символов (добавляет 2,5 или 3 или 4 очки)
0

лучший способ это

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

Попытка этот код для проверки пароля для текстового поля

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

Отъезд demo Here

Смежные вопросы