密码强度计

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

不要将米的长度基于您正在计算的分数，而是进行一些简单的批处理：

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

并将大小分配给这些批处理的分数。这样，无论密码有多强，它都不会超过您指定的“困难”大小。

Answer 2

我已将您的代码简化为工作 jsFiddle。我在代码中看到一些奇怪的事情，可能需要首先解决。

首先，这个循环似乎没有理由，因为它所做的只是一遍又一遍地运行相同的代码。password.length times:

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 3

至于防止仪表增长太多，就像满足以下条件一样简单：

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

并且它基本上会限制仪表增长超过 200px

Answer 4

您需要检查仪表的更新宽度是否不会超过您所需的最大宽度。即使您在 style 元素中设置了宽度，您的脚本也会更改 style 元素，并且 div 可以随心所欲地增长，而不会受到初始 style 属性的限制。 添加一个检查，例如“添加此”，如果角色将样式设置得比您想要的更宽，您可以将其恢复为您想要的最大宽度。

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

}

您可以在更新后