javascript - 密码强度计

Question

我正在尝试创建自己的 JS 密码强度计。

它以前可以工作，但我不喜欢它的工作方式，所以我尝试使用

{score +=10;}

而不仅仅是:

score++

这是我的代码: http://jsfiddle.net/RSq4L/

最诚挚的问候， 肖恩，

希望有人能帮忙

Answer 1

多个问题:

1. 您的passwordStrength() 函数未在jsFiddle 的全局范围内定义，因此不会被调用。这可能是您设置 jsFiddle 的方式造成的，也许在您的实际代码中不是问题。
2. 获取适当的 ratingMsg 的方法将不起作用，因为您没有每个可能分数的数组值，因此许多分数将生成“未定义”的 ratingMsg。
3. 您的 CSS 类也很稀疏，因此有许多分数值与两者都不匹配，并且没有适当的 CSS 类/样式生效。如果您希望每个评级值都有一个特定的类，那么也许您应该将类​​名放入 ratings 数组中，以便可以从那里与 ratingsMsg 一起获取它。

对于第一个问题，在你的jsFiddle中，你还必须确保密码处理函数是在全局范围内定义的。您的 jsFiddle 设置方式并非如此(它位于 onload 处理程序中)。您可以在 jsFiddle 中修复此问题，只需将左上角的第一个下拉菜单设置为“无换行(头部)”即可。

对于第二期，您使用的是:

ratingMsg[score]

但是，您的数组是一个稀疏数组，不能保证包含大多数可能分数的条目。您根本不能这样做，因为您访问的许多元素将具有未定义的值，这不会给您提供有意义的消息。例如，如果分数为 15，您将访问 ratingMsg[15]，但数组中的该空间没有值，因此您不会收到有意义的评级消息。

解决方案是找到一种不同的方式来选择正确的消息。最简单的方法就是使用 if/else if/else if 语句来检查分数在哪个范围内并设置适当的消息。有更优雅的表驱动方法，但所有方法都涉及搜索数据结构以查找当前分数介于哪两个值之间并使用该消息。

如果你看看这个 jsFiddle http://jsfiddle.net/jfriend00/dA7XC/ ，您会看到您的代码被调用，但有时它只命中数组中的值。

而且，这是一个重写的算法，无论这个 fiddle 中显示的分数如何，它都能找到适当的消息:http://jsfiddle.net/jfriend00/jYcBT/ .

它使用这样的数据结构:

  var ratingMsg = [
      0, "Unclassified",
      10, "Weak",
      20, "Fair",
      50, "Better",
      60, "Medium",
      70, "Good",
      90, "Strong"
  ];

和这样的 for 循环以获得适当的 ratingMsg:

  for (var i = ratingMsg.length - 2 ; i >= 0; i-=2) {
      if (score >= ratingMsg[i]) {
          msg = ratingMsg[i+1];
          break;
      }
  }