使用Javascript验证密码

Question

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

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

我不是Javascript方面的专家，我一直在尝试将所有这些要求放在一个脚本中，但我不知道如何解决这个要求的第1,4,5部分，所以我希望有人能帮我做些什么，以实现所有这些要求。。。

此外，我的“弱密码、中密码、强密码”消息显示在输入元素的顶部，该元素的ID名为msg（正如你所知）

以下是我的脚本：

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

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') )

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

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

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

<input maxlength="13">

并更新您的函数，直到长度大于8时才显示密码强度：

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

消息由你决定，只是放了一些令人沮丧的东西。

最后，看看最后的代码：

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>