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

您的模式确定，但是您需要一致地选择元素的元素及其属性，并在适当的变量上调用适当的方法：

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="" />

Answer 2

我从来都不擅长读/写正则表达式。我宁愿在不同的字符串中使用不同类型的字符。这比正则表达式要多得多的代码，但可读性应该可以。

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

我很确定有一种简洁的方法可以简化该功能。祝你好运。

如何验证密码并确认要求（1个大写，1个小写，1个特殊字符，1位数字）？

2 个答案: