3

我基本上必须从头开始制作一个密码表（不能使用像 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 中扩展它来制作仪表，就是这样。请帮忙！提前致谢。

4

4 回答 4

1

不要根据您计算的分数来确定仪表的长度，而是进行一些简单的批处理：

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

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

于 2011-09-20T19:00:30.583 回答
0

就防止仪表过度增长而言，就像遇到以下情况一样简单：

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

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

于 2011-09-20T18:59:49.520 回答
0

我已将您的代码简化为有效的 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";
    }
}

显然，您可能希望根据需要调整权重。

于 2011-09-20T19:11:05.150 回答
0

您需要检查仪表的更新宽度不会超过您所需的最大宽度。即使您在 style 元素中设置了宽度，您的脚本也会更改 style 元素，并且 div 可以随心所欲地增长，而不受初始样式属性的限制。您可以添加支票，例如

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

}

Add this after your updates and if a character ever sets the style wider than you want it, you can have it reverted to the max width that you want.

于 2011-09-20T19:11:57.537 回答