密码强度函数只返回一个值[关闭]答案

【问题标题】：Password strength function return only one vlaue [closed]密码强度函数只返回一个值[关闭]
【发布时间】：2013-02-17 16:52:01
【问题描述】：

我是 Javascript 新手，我正在尝试编写密码强度函数。但是每次我输入密码时，它只返回一个值（“非常强”）。我完全糊涂了！！这是我的代码：

function pwd_Validation()
    {
        var strength = new Array();
        strength[0] = "Blank";
        strength[1] = "Very Weak";
        strength[2] = "Weak";
        strength[3] = "Medium";
        strength[4] = "Strong";
        strength[5] = "Very Strong";


        var password = document.getElementById('pwd')

        if (password.length < 1)
            var score = 1;


       else if (password.length < 4)
             score = 2


        else if (password.length >= 8 && password.value.match(/[a-z]/))
                 score = 3;


       else if (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/))
                score = 4;


       else  (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
                score = 5;


        document.getElementById('spnPwd').innerHTML = strength[score];

        if ( password.value = "")
            document.getElementById('spnPwd').innerHTML = strength[0];
            document.getElementById('spnPwd').style.color="#FF0000"

        if ( strength[score] == 1)
            document.getElementById('spnPwd').innerHTML = strength[1];
            document.getElementById('spnPwd').style.color="#FF0000"

        if ( strength[score] == 3)
            document.getElementById('spnPwd').innerHTML = strength[3];
            document.getElementById('spnPwd').style.color="#FFCC00"

        if ( strength[score] == 4)
            document.getElementById('spnPwd').innerHTML = strength[4];
            document.getElementById('spnPwd').style.color="#19D119"

         if ( strength[score] == 5)
            document.getElementById('spnPwd').innerHTML = strength[5];
            document.getElementById('spnPwd').style.color="#006600"

    }

HTML 代码：

Password :   <input type="password" id="pwd" onblur="pwd_Validation()" />
                <span id="spnPwd" class="pwd_Strength" ></span><br />

【问题讨论】：

password.value = "" 分配一个变量，但在if 子句中使用
你也有逻辑问题。如果您的密码长度为 4、5、6 或 7，则您的 score 变量不会设置为任何值。

标签： javascript html passwords

【解决方案1】：

有几个编码错误和逻辑错误。我建议进行此重写，以进行以下修复/改进：

获取实际密码值并使用其长度，而不是使用密码 DOM 元素的长度。
处理长度在 4 到 7 之间的情况（您的逻辑跳过的情况）
以正确的顺序对正则表达式测试进行排序，以便实际找到正确的分数
更正了标点正则表达式
修复 else 逻辑问题
将颜色放入一个平行数组中。
以更有效/更紧凑的方式声明力量弦。
给你的分数一个默认值，这样就可以保证它有一个值。
不要多次重复正则表达式测试
使用regex.test，因为当您只想知道它是否匹配时，它比regex.match 更有效
从数组中提取所需的颜色值，而不是为每个分数使用if 语句
只获取一次spnPwd DOM 元素
将数字正则表达式更改为\d
为安全起见，在所有 if/else 语句中使用大括号

以及建议的代码：

function pwd_Validation() {
    var strengths = ["Blank", "Very Weak", "Weak", "Medium", "Strong", "Very Strong"];
    var colors = ["#FF0000", "#FF0000", "#FFCC00", "#FFCC00", "#19D119", "#006600"];
    var score = 0;
    var regLower = /[a-z]/, regUpper = /[A-Z]/, regNumber = /\d/, regPunctuation = /[.,!@#$%^&*?_~\-£()]/;

    var password = document.getElementById('pwd').value;
    if (!password) {
        score = 0;
    } else if (password.length < 2) {
        score = 1;
    } else if (password.length < 4) {
        score = 2;
    } else if (password.length <= 7) {
        score = 3;
    } else {
        // length is >= 8 in here
        if (regLower.test(password) && regUpper.test(password) && regNumber.test(password)) {
            // if it also has punctuation, then it gets a 5, otherwise just a 4
            if (regPunctuation.test(password)) {
                score = 5;
            } else {
                score = 4;
            }
        } else {
            // if doesn't have upper, lower and numbers, then it gets a 3
            score = 3;
        }
    }
    var spanPwd = document.getElementById('spnPwd');
    spanPwd.innerHTML = strengths[score];
    spanPwd.style.color = colors[score];
}

【讨论】：

哇，谢谢，它有效:)

【解决方案2】：

最后一个else 中缺少一个if，因此解析如下：

...
else {
    (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
}

score = 5;

在控制结构中始终使用括号是一个好习惯。

【讨论】：

这不是问题，看我的回答
@Manishearth 不是唯一的问题，你的意思是。即使通过应用您的答案，仍然需要修复此错误。（事实上这就是为什么最终的结果是分数总是 5。）
哦，哎呀。然后在我的答案中修复，谢谢
实际上在 OPs 代码中还有很多个问题，现在其他答案正在出现......全部真相是所有答案的组合。
看我的回答。他将范围内的数字相同，然后他询问了数字的强度[score]。这是我认为的主要错误

【解决方案3】：

您忘记将密码字段转换为其值：

var password = document.getElementById('pwd')

应该是 var password = document.getElementById('pwd').value

在您原来的情况下，password.length 是未定义的，并且与它的所有比较都评估为 false。（所以最后的else被执行）

另外，你最后一个 else 块

   else  (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
            score = 5;

应该是

   else  if(password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
            score = 5;

除此之外，请在 ifs 中使用大括号。编写这样的代码是不好的做法：

if(...)
 ...
else if(...)
 ...
else
 ...

这样更好：

if(...){
 ...
}else if(...){
 ...
}else{
 ...
}

【讨论】：

【解决方案4】：

你保存到 var score 然后你问 strength[score]。 if (strength[score] == 3)

那么您在代码的第二部分中缺少一些 { }！

在最后一部分你可以使用

switch(score) {
 case 1: ... break;

...
 default: ... break;
}

【讨论】：

【解决方案5】：

我已通过jsbeautifier.org 推送您的代码。这根据 javascript 解释器的实际运行方式重新缩进了您的代码。请注意您的 if 语句如何不运行您认为的代码。

function pwd_Validation() {
    var strength = new Array();
    strength[0] = "Blank";
    strength[1] = "Very Weak";
    strength[2] = "Weak";
    strength[3] = "Medium";
    strength[4] = "Strong";
    strength[5] = "Very Strong";

    var password = document.getElementById('pwd')

    if (password.length < 1) var score = 1;
    else if (password.length < 4) score = 2
    else if (password.length >= 8 && password.value.match(/[a-z]/)) score = 3;
    else if (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/)) score = 4;
    else(password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
    score = 5;

    document.getElementById('spnPwd').innerHTML = strength[score];

    if (password.value = "") document.getElementById('spnPwd').innerHTML = strength[0];
    document.getElementById('spnPwd').style.color = "#FF0000"

    if (strength[score] == 1) document.getElementById('spnPwd').innerHTML = strength[1];
    document.getElementById('spnPwd').style.color = "#FF0000"

    if (strength[score] == 3) document.getElementById('spnPwd').innerHTML = strength[3];
    document.getElementById('spnPwd').style.color = "#FFCC00"

    if (strength[score] == 4) document.getElementById('spnPwd').innerHTML = strength[4];
    document.getElementById('spnPwd').style.color = "#19D119"

    if (strength[score] == 5) document.getElementById('spnPwd').innerHTML = strength[5];
    document.getElementById('spnPwd').style.color = "#006600"    
}

举一些具体的例子：

if (strength[score] == 5) document.getElementById('spnPwd').innerHTML = strength[5];
document.getElementById('spnPwd').style.color = "#006600"

您可能打算这样：

if (strength[score] == 5) {
    document.getElementById('spnPwd').innerHTML = strength[5];
    document.getElementById('spnPwd').style.color = "#006600"
}

还有：

else(password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
score = 5;

你的意思可能是：

else if (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/)) {
    score = 5;
}

您在代码中提到的实际问题是因为我已经提出了第二个条件。 score = 5 行不是任何条件的一部分，并且将始终运行（出于上述原因）。这就是为什么您总是看到密码“非常强”的原因。

【讨论】：