使用 Javascript 验证密码

Question

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

我有这个要求：
1 - 新密码必须为 8 - 13 个字符，
2 - 密码必须包含数字，
3 - 密码必须包含大小写，
4 - 密码不能包含用户名和 finally
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之间）

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

<input maxlength="13">

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

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

---

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

---

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

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

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>

Answer 2

首先，我不建议在客户端验证密码。它很容易被操纵并且不安全。验证密码服务器端是要走的路。你说你已经有人在做服务器端的事情了，他们应该是在将任何信息（包括密码）放入某种数据库之前验证这些信息的人。

但既然这不能回答你的问题：

第 5 部分不能是客户端。您必须与服务器核实以验证旧密码。

第 1 部分很简单，您已经知道如何找到代码中的密码长度

if(password.length >= 8 && password.length <= 13) {
    //length is valid
}

至于第 4 部分，您需要有他们的用户名，我在您的代码中的任何地方都看不到，所以我只为它创建一个随机变量。

var username = "example";
if(password.indexOf(username)) > -1) {
    // password contains username
{

Answer 3

3 - 密码必须包含大小写，

您的实际测试 3 是错误的，因为它没有考虑变音符号。 正确的测试是：

const username = "k3llydev";


function validatePassword(psw)
{
  let msg = 'password is OK (for 1,2,3,4)'

  switch (true) {
  case  (psw.length < 8 || psw.length > 13):
    msg = '1) bad password length'
    break
  case  (!(/[0-9]/.test(psw))):
    msg = '2) password must contain numbers'
    break
  case (psw == psw.toLowerCase()) || (psw == psw.toUpperCase()):
    msg = '3) password must contain UPPER and lower characters'
    break
  case ( psw.includes(username)):
    msg = '4) password must not contain username'
    break
  }
  return msg
}



console.log ('abc              -> ', validatePassword('abc') )
console.log ('abcdefghijklmnop -> ', validatePassword('abcdefghijklmnop') )
console.log ('CONTRASEÑA       -> ', validatePassword('CONTRASEÑA') )
console.log ('CONT123RASEÑA    -> ', validatePassword('CONT123RASEÑA') )
console.log ('cont123raseña    -> ', validatePassword('cont123raseña') )
console.log ('C1ak3llydevÑ     -> ', validatePassword('C1ak3llydevÑ') )
console.log ('cont123raseÑa    -> ', validatePassword('cont123raseÑa') )

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {min-height:100% !important; top:0;}