javascript - 使用 Javascript 验证密码

Question

我正在尝试使用“新密码”解决方案来满足客户的要求。

我有这个要求:
1 - 新密码必须为 8 - 13 个字符，
2 - 密码必须包含数字，
3 - 密码必须包含大写和小写，
4 - 密码不能包含用户名和最后
5 - 密码之前不得使用过。

我不是 Javascript 专家，我一直在尝试将所有这些要求放入脚本中，但我不确定如何解决此要求的第 1,4,5 部分，所以我希望有人可以帮助我做什么才能满足所有这些要求...

此外，我的“弱密码，中密码，强密码”消息显示在输入元素的顶部，该输入元素是一个名为 msg 的 ID(只是为了让您知道)

这是我的脚本:

function validatePassword(password) {

  // Do not show anything when the length of password is zero.
  if (password.length === 0) {
    document.getElementById("msg").innerHTML = "";
    return;
  }

  // Create an array and push all possible values that you want in password

  var matchedCase = new Array();
  matchedCase.push("[$@$!%*#?&]"); // Special Charector
  matchedCase.push("[A-Z]"); // Uppercase Alpabates
  matchedCase.push("[0-9]"); // Numbers
  matchedCase.push("[a-z]"); // Lowercase Alphabates

  // Check the conditions
  var ctr = 0;
  for (var i = 0; i < matchedCase.length; i++) {
    if (new RegExp(matchedCase[i]).test(password)) {
      ctr++;
    }
  }
  // Display it
  var color = "";
  var strength = "";
  switch (ctr) {
    case 0:
    case 1:
    case 2:
          strength = "Contraseña Débil";
          color = "red";
          break;
    case 3:
          strength = "Contraseña Regular";
          color = "orange";
          break;
    case 4:
          strength = "Contraseña Fuerte";
          color = "green";
          break;
  }
  document.getElementById("msg").innerHTML = strength;
  document.getElementById("msg").style.color = color;
}

Answer 1

1.- 处理密码长度(范围在8-13之间)

我建议，对于最大长度，您使用输入的 native 属性maxlength:

<input maxlength="13">

并更新您的函数，在长度大于 8 之前不显示任何有关密码强度的信息:

if (password.length < 8) {
  document.getElementById("msg").innerHTML = "";
  return;
}

<小时/>

2 和 3 工作正常，干得好。

<小时/>

4.- 密码不得包含用户名

了解您已将用户名保存在范围可访问的其他位置，您可以简单地添加另一个如果在下面您评估密码长度的位置，并在密码包含用户名时进行返回:

if (password.includes(username)) {
    document.getElementById("msg").innerHTML = "La contraseña no debe contener el nombre de usuario.";
    return;
}

该消息由您决定，只是添加了一些示范性内容。

<小时/>

5.- 已经过时了，这必须在服务器端处理。

<小时/>

最后，看看最终的代码:

const username = "k3llydev";

function validatePassword(password) {

  // Do not show anything when the length of password is zero.
  if (password.length < 8) {
    document.getElementById("msg").innerHTML = "";
    return;
  }
  
  if (password.includes(username)) {
    document.getElementById("msg").innerHTML = "La contraseña no debe contener el nombre de usuario.";
    return;
  }

  // Create an array and push all possible values that you want in password

  var matchedCase = new Array();
  matchedCase.push("[$@$!%*#?&]"); // Special Charector
  matchedCase.push("[A-Z]"); // Uppercase Alpabates
  matchedCase.push("[0-9]"); // Numbers
  matchedCase.push("[a-z]"); // Lowercase Alphabates

  // Check the conditions
  var ctr = 0;
  for (var i = 0; i < matchedCase.length; i++) {
    if (new RegExp(matchedCase[i]).test(password)) {
      ctr++;
    }
  }
  // Display it
  var color = "";
  var strength = "";
  switch (ctr) {
    case 0:
    case 1:
    case 2:
      strength = "Contraseña Débil";
      color = "red";
      break;
    case 3:
      strength = "Contraseña Regular";
      color = "orange";
      break;
    case 4:
      strength = "Contraseña Fuerte";
      color = "green";
      break;
  }
  document.getElementById("msg").innerHTML = strength;
  document.getElementById("msg").style.color = color;
}

<input onkeyup="validatePassword(this.value)" maxlength="13">
<span id="msg"></span>