如何使用 JavaScript 以返回数字形式的密码质量的方式测试密码强度？答案

【问题标题】：How can I use JavaScript to test for password strength in a way that returns the quality of the password in numeric form?如何使用 JavaScript 以返回数字形式的密码质量的方式测试密码强度？
【发布时间】：2018-05-26 22:32:16
【问题描述】：

这是下面的挑战：

编写一个算法来检查一个密码的有效性符合以下条件的用户。

如果满足这些条件，则向用户返回一个百分比值他/她的密码有多强：

●小写[ a - z ] -> 25%之间至少1个字母

●大写字母 [ A - Z ] -> 25% 之间至少有 1 个字母

●至少 1 个介于 [ 0 - 9 ] -> 25% 之间的数字

●至少 1 个字符来自 [ $@#&! ] -> 25%

如果满足这些条件，则根据以下条件向用户发送消息满足条件：

●密码的最小长度为6（显示一条消息）

●密码最大长度为12

对于 HTML：

<body>

  <form class="center-block">

<input type="text" id="password" autocomplete="off" class="form-control input-lg">

<progress max="100" value="0" id="meter"></progress>

<button class="btn btn-success btn-lg btn-block">Show Password Strength</button>

</form>

  <div class="textbox text-center"> password </div>
  
</body>

对于 JavaScript：

var code
=document.getElementById("password");

var strengthbar= document.getElementById("meter");

code.addEventListener("keyup", function(){checkpassword(code.value)

    })
 var display =document.getElementsByClassName("textbox")[0];
    function checkpassword(password)
    {
    var strength=0;
    if (password.match(/[a-z]+/)){
        strength+=1;
    }
    if (password.match(/[A-Z]+/)){
        strength+=1;
    }
    if (password.match(/[0-9]+/)){
        strength+=1;
    }
    if (password.match(/[$@#&!]+/)){
        strength+=1;

        }
    if (password.length<6){
    display.innerHTML="minimum number of characters is 6":
    }

    if (password.length>12){
            display.innerHTML="maximum number of characters is 12";
}
    switch(strength){
    case 0:
        strengthbar.value=0;
        break;

    case 1:
        strengthbar.value=25;
        break;

    case 2:
        strengthbar.value=50;
        break;

    case 3:
        strengthbar.value=75;
        break;

    case 4:
        strengthbar.value=100;
        break; }
}

以上是我自己解决问题的方法。它没有给我任何错误，但 JavaScript 没有在我的 html 上生成任何结果。

Here is a link to the pen I'm using

【问题讨论】：

您尚未解释问题（不，不工作不是问题描述，除非您清楚地解释不工作的含义）或问了一个特定的问题（不，为什么我的代码不起作用不是一个特定的问题）。
您应该有错误，因为document.getElementByClassName("textbox"); 不是函数。它是getElementsByClassName，应该返回一个类似对象的数组。您也没有在提供的代码中的任何地方定义strengthbar。
请不要做什么？要求您改进您的问题？如果您一开始就正确发布它，我就不必要求您改进它。你没有怎么是我的错？
@KenWhite 我敢肯定你不是这个意思，但你看起来有点太粗鲁了。要求一个近距离投票，并将用户引导到帮助页面就足够了。我记得我第一次来的时候更糟，我很高兴我没有遇到愤怒的人。
@DeblatonJean-Philippe：不粗鲁。我留下了一条礼貌的评论，要求发布者改进问题，并得到请不要这样做作为回应。我一点也不粗鲁。我要求发帖人澄清他们不希望我做什么。评论正是为了让发帖人澄清细节而设计的。我也已经有半个多小时没有在这个问题上发布任何内容了，直到你让我这样做。不过，感谢您的意见。当使用完全符合要求澄清的评论变得粗鲁时，SO 就会丢失。

标签： javascript html css

【解决方案1】：

您的代码中有几个错误（因为您通过阅读 cmets 修复了一些错误）。无论如何，我会再次列出它们：

您的 switch 语句开头缺少大括号 ({)
您的函数末尾缺少大括号 ({)
是getElementsByClassName，而不是getElementByClassName。除此之外，getElementsByClassName 返回一个类似 HTMLCollection 的数组，所以你需要像这样选择第一个：getElementsByClassName('textbox')[0]（注意这里的“[0]”）
你不要像innerHTML("bla");那样打电话给innerHTML，它是innerHTML = "bla";

您还应该始终使用分号 (;)。

var code = document.getElementById("password");

var strengthbar = document.getElementById("meter");
var display = document.getElementsByClassName("textbox")[0];

code.addEventListener("keyup", function() {
  checkpassword(code.value);
});


function checkpassword(password) {
  var strength = 0;
  if (password.match(/[a-z]+/)) {
    strength += 1;
  }
  if (password.match(/[A-Z]+/)) {
    strength += 1;
  }
  if (password.match(/[0-9]+/)) {
    strength += 1;
  }
  if (password.match(/[$@#&!]+/)) {
    strength += 1;

  }

  if (password.length < 6) {
    display.innerHTML = "minimum number of characters is 6";
  }

  if (password.length > 12) {
    display.innerHTML = "maximum number of characters is 12";
  }

  switch (strength) {
    case 0:
      strengthbar.value = 0;
      break;

    case 1:
      strengthbar.value = 25;
      break;

    case 2:
      strengthbar.value = 50;
      break;

    case 3:
      strengthbar.value = 75;
      break;

    case 4:
      strengthbar.value = 100;
      break;
  }
}

<body>

  <form class="center-block">

    <input type="text" id="password" autocomplete="off" class="form-control input-lg">

    <progress max="100" value="0" id="meter"></progress>

    <button class="btn btn-success btn-lg btn-block">Show Password Strength</button>

  </form>

  <div class="textbox text-center"> password </div>

</body>

【讨论】：

它说“a@1A”是非常强的密码...您还应该检查字母数。