"密碼強度計"

Question

我正在嘗試創建自己的 JS 密碼強度計。

它以前可以工作，但我不喜歡它的工作方式，所以我嘗試使用

{score +=10;}

Answer 1

多個問題：

1. 您的passwordStrength（）函數未在jsFiddle的全局范圍內定義，因此未得到調用。 這可能是您如何設置jsFiddle的產物，在實際代碼中可能不是問題。
2. 獲得適當的ratingMsg的方法將不起作用，因為您沒有每個可能得分的數組值，因此許多得分將生成“未定義”的ratingMsg。
3. 您的CSS類也很稀疏，因此有很多分數值都不匹配，因此沒有合適的CSS類/樣式有效。 如果要為每個評級值指定一個特定的類，則可能應將該類名放在rating數組中，以便可以從該數組中獲取該類名以及ratingMsg。

對於第一個問題，在jsFiddle中，還必須確保在全局范圍內定義了密碼處理功能。 jsFiddle的設置方式不是（在onload處理程序中）。 您可以通過將jsFiddle中的第一個下拉菜單設置為“ no wrap（head）”來解決此問題。

對於第二個問題，您正在使用：

ratingMsg[score]

但是，您的數組是一個稀疏數組，不能保證為大多數可能的分數提供一個條目。 您根本無法那樣做，因為您訪問的許多元素將具有未定義的值，不會給您有意義的消息。 例如，如果得分為15，則您將訪問ratingMsg [15]，但是數組中該空間中沒有任何值，因此您不會收到有意義的評級消息。

解決方案是找到另一種選擇正確消息的方法。 最簡單的方法是if / else if / else if語句，該語句將檢查分數在哪個范圍內並設置適當的msg。 表驅動方式有更優雅的方式，但是所有方式都涉及通過數據結構進行搜索以找到當前得分介於哪個值和使用該味精。

如果您查看此jsFiddle http://jsfiddle.net/jfriend00/dA7XC/ ，則會看到您的代碼正在被調用，但有時只會在數組中命中值。

而且，這是一個重寫的算法，無論該小提琴中顯示的分數如何，都可以找到適當的味精： http : //jsfiddle.net/jfriend00/jYcBT/ 。

它使用如下數據結構：

  var ratingMsg = [
      0, "Unclassified",
      10, "Weak",
      20, "Fair",
      50, "Better",
      60, "Medium",
      70, "Good",
      90, "Strong"
  ];

和這樣的for循環以獲得適當的等級

  for (var i = ratingMsg.length - 2 ; i >= 0; i-=2) {
      if (score >= ratingMsg[i]) {
          msg = ratingMsg[i+1];
          break;
      }
  }

Answer 2

在這里，您可以前往： http : //jsfiddle.net/RSq4L/11/

第一個問題是在您的小提琴中設置了onLoad選項，因此您的passwordStrength函數實際上並未在全局范圍內聲明。 它在jsFiddle用來包裝您的代碼的onLoad塊內聲明。 當按鍵處理程序嘗試調用該函數時，這將導致頁面錯誤。

您可以通過幾種不同的方式解決此問題：

1. 通過上面的示例，將函數明確聲明為全局函數。
2. 通過選擇jsFiddle的“ no wrap”選項之一而不是onLoad 。
3. 通過動態綁定事件處理程序，而不是通過標記中元素的onkeydown屬性進行設置。

第二個問題是如何鍵入分數消息。 你有：

var ratingMsg = new Array(0);

ratingMsg[0] = "Unclassified";
ratingMsg[10] = "Weak";
ratingMsg[30] = "Fair";
ratingMsg[50] = "Better";
ratingMsg[60] = "Medium";
ratingMsg[70] = "Good"; 
ratingMsg[90] = "Strong";

...然后您通過執行ratingMsg[score]查找消息。 僅當分數與您的索引之一完全匹配時 ，此方法才有效。 而且根據您的數學情況，情況並非總是如此。

我建議做這樣的事情：

ratingMsg = {};

ratingMsg[0] = "Unclassified";
ratingMsg[10] = "Weak";
ratingMsg[30] = "Fair";
ratingMsg[50] = "Better";
ratingMsg[60] = "Medium";
ratingMsg[70] = "Good"; 
ratingMsg[90] = "Strong";

function closestRating(score) {
    var bestKey = 0;
    var bestMatch = 100;
    for (var key in ratingMsg) {
        if (key <= score && score - key < bestMatch) {
            bestMatch = score - key;
            bestKey = key;
        }
    } 
    return ratingMsg[bestKey];
}

毫無關系，您確定要使用onkeydown嗎？ 我認為onkeyup會更好。

Answer 3

您的提琴手腳本有幾個錯誤。 這是更正的一個： 新腳本 。

• 您在這里缺少分號：document.getElementById（“ passwordDescription”）。innerHTML =“ ” + ratingMsg [score] +“ ”
• 您忘記在正則表達式中轉義'^'

Answer 4

我只是為它寫了這個：用於密碼強度強制的 Jquery 插件