密碼強度測量儀

Question

我必須從頭開始製作密碼錶（基本上不能使用jquery之類的外部框架），而且我有兩個問題。

我似乎無法找到一種方式，當用戶輸入某個字符時，它不會跳到很大的長度。

而且即使通過設置寬度，我也無法防止儀表變大。

<input type="password" id="newPass" style="width:206px" onkeyup="strengthMeter()"/><br/><br/> 
       <div style="width:100px;display:inline;"><div id="meter" style="background-color:red;width:10px;height:10px;"></div> 
        <span>Strength</span><span id="strength" style="float:right">Weak</span> 
       </div> 

function strengthMeter(){ 


    var password = $("newPass").value; 
    var numEx = /\d/; 
    var lcEx = new RegExp("[a-z]"); 
    var ucEx = new RegExp("[A-Z]"); 
    var symbols = ['/', '@', '#', '%', '&', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\']; 
    var meterMult = 1; 

    for(var k = 0; k < password.length; k++){ 
     if(numEx.test(password)){ 
      meterMult += 0.75; 
      $("meter").style.width = " " + (10*meterMult) + "px"; 
     } 

     if(ucEx.test(password)){ 
      meterMult += 1; 
      $("meter").style.width = " " + (10*meterMult) + "px"; 
     } 

     if(lcEx.test(password)){ 
      meterMult += 0.25; 
      $("meter").style.width = " " + (10*meterMult) + "px"; 
     } 

     for(var i = 0; i < symbols.length; i++){ 
      if(password.indexOf(symbols[i]) >= 0){ 
       meterMult += 1; 
       $("meter").style.width = " " + (10*meterMult) + "px"; 
      } 
      } 
     if(meterMult >= 12){ 
      $("strength").innerHTML = "Strong"; 
      } 
     else if(k >= 6){ 
      $("strength").innerHTML = "Medium"; 
     } 
     else 
      $("strength").innerHTML = "Weak"; 
     } 

    } 

上面有我用來製作儀表的div。基本上，我正在考慮一個div，並在另一個div中擴展它來製作計量表，就是這樣。請幫忙！提前致謝。

Answer 1

我已將您的代碼縮減爲working jsFiddle。我在代碼中看到一些時髦的東西，可能需要首先將它們整理出來。

首先，似乎沒有理由循環所有它做的是在運行相同的代碼，一遍又一遍password.length時間：

for(var k = 0; k < password.length; k++){ 

您的意思是要檢查的每個字符密碼，在那個循環中一次一個？如果是這樣，那不是你的代碼在做什麼。

至於寬度，我建議最簡單的方法是將容器的寬度設置爲所需的最大寬度，然後將儀表的寬度設置爲父級的從0到100的百分比。

這裏是你的代碼（working here in a jsFiddle），在一堆的方式修訂的新版本：

1. 改變了紅條的寬度它的比例是父母和封頂於100％，因此它會永遠不要超出父寬度。
2. 入住密碼的每個字符單獨
3. 設置密碼欄的寬度只有一次
4. 更改欄的佈局以匹配輸入字段

這裏的寬度是從代碼新版本：

function strengthMeter() { 
    var password = $("newPass").value; 
    var numEx = /\d/; 
    var lcEx = /[a-z]/; 
    var ucEx = /[A-Z]/; 
    var symbols = ['/', '@', '#', '%', '&', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\']; 
    var meterMult = 1; 

    for (var k = 0; k < password.length; k++) { 
     var pchar = password.charAt(k); 
     if(numEx.test(pchar)){ 
      meterMult += 0.75; 
     } 

     if(ucEx.test(pchar)){ 
      meterMult += 1; 
     } 

     if(lcEx.test(pchar)){ 
      meterMult += 0.25; 
     } 
    } 

    for (var i = 0; i < symbols.length; i++) { 
     if(password.indexOf(symbols[i]) >= 0) { 
      meterMult += 1; 
     } 
    } 

    // assume that 100% is a meterMult of 15 
    var fullStrength = 15; 
    $("meter").style.width = ((Math.min(fullStrength, meterMult)/fullStrength)*100) + "%"; 

    if(meterMult >= 12) { 
     $("strength").innerHTML = "Strong"; 
    } 
    else if(password.length >= 6) { 
     $("strength").innerHTML = "Medium"; 
    } 
    else { 
     $("strength").innerHTML = "Weak"; 
    } 
} 

很明顯，您可能想要根據需要調整權重。

Answer 2

至於防止電錶從得到增長太多，它具有像一個條件一樣容易：

$("meter").style.width = " " + (10*meterMult>200?200:10*meterMult) + "px"; 

它將基本上限制計增長近200像素

Answer 3

相反立足米的長度過你在計算分數的，做一些簡單的配料：

if (score < 10) { 
    size = weak 
} else if (score < 30) { 
    size = medium 
} else { 
    size = hard 
} 

，並指定尺寸那些批量的分數來代替。這樣，無論密碼有多強大，它都不會超過您指定的「難度」的任何大小。

Answer 4

您需要檢查儀表的更新寬度不會超過您的最大所需寬度。即使您在樣式元素中設置了寬度，腳本也會更改樣式元素，並且div可以隨意擴展，而不受初始樣式屬性的限制。您可以添加一個檢查像

var n = $("meter").style.width; 
if(n>someValue) 
{ 
    //set the meter to the MAX width that you want 
    $("meter").style.width=100; 

} 

您的更新後添加這一點，如果一個字符集永遠比你想要的風格更廣泛，你可以把它恢復到所需的最大寬度。