JavaScript正则表达式密码验证异常：满足规则却仍显示红色背景

我一眼就看到你代码里的两个关键问题，这就是为啥符合规则的密码还是变红的原因：

问题1：正则表达式的数字匹配写错了 #

你正则里的(?=.*d)是无效的——这里的d只是一个普通字母，根本不会匹配数字！要匹配0-9的数字，得用转义后的\d，所以这部分应该改成(?=.*\d)。

同时，正则最后面的字符集[A-Za-zd@$!%*?&]里的d也要换成\d，不然这个允许的字符集合里也没包含数字，相当于还是不允许输入数字，这肯定会导致验证失败。

问题2：DOM元素变量引用错误 #

你在checkPass.test(password.value)里用了password.value，但你之前定义的获取密码框的变量是passwordField啊！这里应该写成passwordField.value，不然浏览器会找不到password这个变量，直接导致验证逻辑走else分支，背景变红。

修正后的完整代码 #

let passwordField = document.getElementById("password");
passwordField.addEventListener("focusout", () => {
  // 修正了数字匹配的正则，以及变量引用
  let checkPass = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  if (checkPass.test(passwordField.value)) {
    passwordField.style.backgroundColor = "green";
    console.log("green");
  } else {
    passwordField.style.backgroundColor = "red";
    console.log("red");
  }
});

小提示：以后遇到这种问题，可以打开浏览器的控制台（F12）看看有没有报错信息，像你这个代码里如果用了未定义的password变量，控制台肯定会抛出错误，能帮你更快定位问题~

内容的提问来源于stack exchange，提问作者Eljano Hita