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

我已将您的代码缩减为working jsFiddle。我在代码中看到了几个可能需要先排序的时髦事物。

首先，似乎没有理由进行此循环，因为它正在做的是一遍又一遍地运行相同的代码password.length次：

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

你的意思是检查密码中的每个字符，在该循环中一次一个？如果是这样，那不是你的代码正在做的事情。

至于宽度，我建议最简单的方法是将容器的宽度设置为您想要的最大宽度，然后将仪表的宽度设置为父级的百分比，范围是0到100。 / p>

以下是您的代码的新版本（working here in a jsFiddle），并以多种方式进行了修订：

将红色条的宽度更改为其父级的百分比，并将其限制为100％，以便它永远不会超出父级宽度。
分别检查密码中的每个字符
仅设置一次密码栏的宽度
更改栏的布局以匹配输入字段的宽度

以下是新版本的代码：

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;

}

在您的更新后添加此内容，如果某个角色设置的样式比您想要的更宽，则可以将其恢复为您想要的最大宽度。

密码强度计

4 个答案: