如何验证密码并确认满足要求（1 个大写、1 个小写、1 个特殊字符、1 个数字）？答案

【问题标题】：How to validate password and confirm requirements (1 upper, 1 lower, 1 special character, 1 digit) are met?如何验证密码并确认满足要求（1 个大写、1 个小写、1 个特殊字符、1 个数字）？
【发布时间】：2019-08-07 15:59:02
【问题描述】：

我正在尝试验证最小长度为 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="" />

【问题讨论】：

首先，您需要修复函数定义语法 - 将参数列表放在函数名之后
您在pw 中获得了两次价值。
你应该好好阅读Reference - Password Validation。

标签： javascript regex html validation passwords

【解决方案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="" />

【讨论】：

【解决方案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;
}

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

【讨论】：