密碼強度計

Question

我必須從頭開始制作密碼計（不能使用像jquery這樣的外部框架），而且我遇到了2個問題。

我似乎無法找到一種方式，當用戶輸入某個角色時，它不會將儀表跳到很長的位置。

即使通過設置寬度，我也無法阻止該儀表變大。

<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

不是根據你計算的分數來計算儀表的長度，而是做一些簡單的批處理：

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

而是為這些批量分數分配大小。 這樣，無論密碼有多強，它都不會超過你指定的“難”的大小。

Answer 2

至於防止儀表增長太多，就像有這樣的條件一樣容易：

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

它基本上會限制儀表增長超過200px

Answer 3

我已經將你的代碼縮減為一個有效的jsFiddle 。 我在代碼中看到了幾個可能需要先排序的時髦東西。

首先，似乎沒有理由進行此循環，因為它正在做的是一遍又一遍地運行相同的代碼password.length次：

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

你的意思是檢查密碼中的每個字符，在該循環中一次一個？ 如果是這樣，那不是你的代碼正在做的事情。

至於寬度，我建議最簡單的方法是將容器的寬度設置為您想要的最大寬度，然后將儀表的寬度設置為父級的百分比從0到100。

這是你的代碼的新版本（ 在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 4

您需要檢查儀表的更新寬度是否超​​過最大所需寬度。 即使您在樣式元素中設置了寬度，您的腳本也會改變樣式元素，並且div可以根據需要增長，而不受該初始樣式屬性的限制。 您可以添加支票

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

}

在更新后添加此項，如果角色設置的樣式比您想要的更寬，則可以將其恢復為所需的最大寬度。