Проверка пароля с помощью Javascript

Question

Я пытаюсь удовлетворить требования клиента с помощью решения «Новый пароль».

У меня есть следующие требования:
1 - новый пароль должен содержать 8 - 13 символов,
2 - пароль должен содержать цифры,
3 - пароль должен содержать прописные и строчные буквы,
4 - пароль не должен содержать имя пользователя и, наконец,
5 - пароль не должен использоваться ранее.

Я не эксперт по Javascript, и я пытался поместить все эти требования в сценарий, но я не уверен, как решить часть 1,4,5 этого требования, поэтому яЯ надеюсь, что кто-то может помочь мне с тем, что я могу сделать, чтобы выполнить все эти требования ...

Кроме того, мое сообщение «Слабый пароль, Средний пароль, Надежный пароль» отображается в верхней части окна. элемент ввода, который был идентификатором с именем 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

1.- Обрабатывать длину пароля (диапазон от 8 до 13)

Я бы предложил, чтобы для максимальной длины вы использовали собственный атрибут для входных данных 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>

Answer 2

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

Answer 3

Прежде всего, я бы не советовал проверять пароли на стороне клиента. Это может быть легко манипулировано и не безопасно. Проверка паролей на стороне сервера - путь. Вы сказали, что у вас уже есть люди, которые занимаются серверной работой, они должны проверять любую информацию (включая пароли), прежде чем помещать ее в какую-то базу данных.

Но поскольку это не отвечает на ваш вопрос:

Часть 5 не может быть на стороне клиента. Вам придется проверить с сервером, чтобы подтвердить старый пароль.

Часть 1 проста, вы уже знаете, как найти длину пароля, как у вас есть это в вашем коде

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

Что касается части 4, вам нужно иметь их имя пользователя, которое янигде не вижу в вашем коде, поэтому просто создайте для него случайную переменную.

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