1. 首頁
  2. 問答
  3. jQuery密碼強度檢查器

jQuery密碼強度檢查器

2009-09-07 81 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); 
     }); 
    });

來源

2009-09-07 Evernoob

+1

+1大問題 – karim79 2009-09-07 10:29:00

+1

對於更復雜的密碼強度評估參見： http://stackoverflow.com/questions/948172/password -Strength米/ 11268104＃11268104 – 2012-06-29 20:20:53

回答

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

（修改糾正語法錯誤。）

來源

2009-09-07 10:47:51 amitkaz

+0

你能解釋一下這樣做：'/ {5 \} /' – yckart 2013-05-30 21:38:55

+1

應該是'/ {5} /'。逗號表示「沒有上限」。如果沒有逗號，它會嘗試匹配5個字符。 – 2013-12-18 22:48:13

1
  • 密碼的長度應至少爲8個字符。
  • 強度隨着長度的增加而增加，更長的密碼應該有更多的分數。
  • 包含＃/「之類的特殊字符（或者除[a-Z0-9]之外的任何其他字符）
  • 對於真正長的密碼，此方法可能會變得緩慢，爲什麼不測試每個新的性格和使用字典設有密碼已經有了。

來源

2009-09-07 10:26:47

2

在GS的回答上面，你應該檢查對常見的字典裏的單詞的密碼（使用哈希，可能）。否則，像'Yellow1'這樣的弱密碼將被您的邏輯評估爲強大。

來源

2009-09-07 10:39:46 rjohnston

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

});

來源

2009-09-07 13:41:30 Sauron

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

    }); 

});

希望這些組邏輯將解決問題

來源

2014-06-05 20:06:20 Anjan

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 分）

來源

2016-09-18 10:24:48

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>

來源

2017-02-18 09:36:51

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

來源

2017-12-29 07:34:56

 相關問題

  • 暫無相關問題^_^