使用 Javascript 验证密码

Question

我正在尝试使用 "New Password" 解决方案来满足客户的要求。

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

我不是 Javascript 方面的专家，我一直在尝试将所有这些要求放在一个脚本中，但我不确定如何解决此要求的第 1、4、5 部分，所以我希望有人可以帮助我实现所有这些要求...

此外，我的 "Weak Password , Medium Password, Strong Password" 消息显示在一个名为 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

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

但由于这不能回答您的问题：

第 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 2

1.- 句柄密码长度（范围在8-13之间）

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

<input maxlength="13">

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

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

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

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

了解您已将用户名保存在范围可访问的其他地方，如果在评估密码长度的下方，您可以简单地添加另一个，如果密码包含用户名：

，则执行 return

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 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;}

使用 Javascript 验证密码

Validation for password with Javascript

javascript

passwords

1.- 句柄密码长度（范围在8-13之间）

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

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

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

使用 Javascript 验证密码

Validation for password with Javascript

javascript

passwords

1.- 句柄密码长度（范围在8-13之间）

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

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

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

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