Как проверить пароль и подтвердить соответствие требованиям (1 верхний, 1 нижний, 1 специальный символ, 1 цифра)?

Question

Я пытаюсь проверить поле ввода пароля с минимальной длиной 8 символов и должно содержать как минимум 1 верхний регистр, 1 нижний регистр, 1 цифру и 1 специальный символ.[Если пароль действителен, метка становится зеленой.Если он недействителен, ярлык становится красным.]

Я думаю, что получил часть минимальной длины, но я не уверен, правильно ли я реализую свой Javacsript для других требований.

function green() {
  var pw = document.getElementById('password').value;
  var pattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$";
  if (pw.value == pattern) {
    document.getElementById('pw').style.color = "Green";
    document.getElementById('pw').innerHTML = "Password: &#10004";
  } else {
    document.getElementById('pw').style.color = "Black";
    document.getElementById('pw').innerHTML = "Password:";
  }
}

<label id="pw" for="password">Password:</label>
<input id="password" name="password" minlength="8" maxlength="50" class="form-control" type="password" onkeyup="green()" value="" />

Answer 1

Я никогда не был хорош в чтении / написании регулярных выражений. Я предпочитаю использовать разные типы символов в разных строках. Это намного больше кода, чем с регулярным выражением, но читаемость должна быть в порядке.

function green() {
    var password = document.getElementById('password').value;

    var lowercase = 'abcdefgh.....xyz';
    var uppercase = 'ABCDEFGH.....XYZ';
    var digit = '1234567890';
    var special = '§!"#¤%&/()=?@£$€{[]}+.....,<>;:_';

    var valid = true;

    if (!containsValidCharacter(password, lowercase)) {
        valid = false;
    }

    if (!containsValidCharacter(password, uppercase)) {
        valid = false;        }

    if (!containsValidCharacter(password, special)) {
        valid = false;
    }

    if (!containsValidCharacter(password, digit)) {
        valid = false;
    }

    if (password.length < 8) {
        valid = false;
    }

    if (valid) {
        document.getElementById('pw').style.color = "Green";
        document.getElementById('pw').innerHTML = "Password: &#10004";
    } else {
        document.getElementById('pw').style.color = "Black";
        document.getElementById('pw').innerHTML = "Password:";
    }
}

function containsValidCharacter(stringToTest, validCharacters) {
    for (var i = 0; i < stringToTest.length; i++) {
        if (validCharacters.indexOf(stringToTest.charAt(i)) !== -1) {
            return true;
        }
    }
    return false;
}

Я почти уверен, что есть простой способ упростить эту функцию. Удачи.

Answer 2

С вашим шаблоном все в порядке, но вам нужно последовательно выбирать элементы и их свойства и вызывать соответствующие методы для соответствующих переменных:

var pw = document.getElementById('password').value;

поместит значение (строку) в переменную pw, поэтому

if (pw.value == pattern) {

не имеет смысла - строки не имеют свойства .value.

Чтобы определить объект регулярного выражения, используйте синтаксис /, например

var pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

не синтаксис строки (" разделители), иначе у вас будет только строка.

Чтобы проверить, проходит ли строка регулярное выражение, вы можете вызвать .test для регулярного выражения, передав строку, которую вы хотите проверить.

Строка, которую вы назначаете для style.color, должна быть в нижнем регистре, а не в заголовке:

function green() {
  var pwText = document.getElementById('password').value;
  var pwElm = document.getElementById('pw');
  var pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  if (pattern.test(pwText)) {
    pw.style.color = "green";
    pw.innerHTML = "Password: &#10004";
  } else {
    pw.style.color = "black";
    pw.innerHTML = "Password:";
  }
}

<label id="pw" for="password">Password:</label>
<input id="password" name="password" minlength="8" maxlength="50" class="form-control" type="password" onkeyup="green()" value="" />

Кроме того, вы можете подумать о том, чтобы дать понять пользователю, что введенного пароля недостаточно, возможно, закрасьте элемент красным, если он недостаточно хорош:

function green() {
  var pwText = document.getElementById('password').value;
  var pwElm = document.getElementById('pw');
  var pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  if (pattern.test(pwText)) {
    pw.style.color = "green";
    pw.textContent = "Password: ✔";
  } else {
    pw.style.color = "red";
    pw.textContent = "Password: ❌";
  }
}

<label id="pw" for="password">Password:</label>
<input id="password" name="password" minlength="8" maxlength="50" class="form-control" type="password" onkeyup="green()" value="" />