JavaScript密码强度验证特殊字符与最小长度校验失效问题排查

故障根因 #

• 变量名冲突覆盖DOM引用：
  代码开头已通过var special = document.getElementById("special");获取了特殊字符提示项的DOM元素，但在myInput.onkeyup回调内部，又用var special声明正则表达式：

  var special = /[@$!%*?&]/g;
  

  由于var为函数作用域且存在变量提升特性，该声明会覆盖外层的DOM引用，使函数内的special指向正则对象。后续调用special.classList.remove(...)时，正则对象不存在classList属性，直接抛出运行时错误，导致整个keyup回调中断，后续的密码长度校验逻辑完全无机会执行。
• 特殊字符正则写法错误：
  正则中的&是HTML转义写法，直接嵌入JS正则会被解析为&、a、m、p四个独立字符加入匹配集，既错误将普通字母a/m/p判定为特殊字符，也漏匹配了转义对应的真实&字符。同时正则的特殊字符匹配范围与input标签pattern属性定义的范围不一致，会导致两端校验结果矛盾。

修复步骤 #

1. 重名变量更名，避免DOM引用被覆盖
   将函数内部的正则变量改为独立命名（如specialCharRegex），不再与外层DOM元素变量重名。
2. 对齐特殊字符匹配范围
   参考input标签pattern中定义的特殊字符列表#?!@$%^*-&，调整JS正则的匹配规则：将HTML转义的&改为JS可直接识别的&，将-放在字符集末尾避免被解析为ASCII范围符，保证与input的校验规则完全一致。
3. 长度校验逻辑本身无问题，执行中断的问题解决后即可正常运行。

修复后可直接运行的JS代码 #

var myInput = document.getElementById("password_1");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var special = document.getElementById("special");
var length = document.getElementById("length");

myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

myInput.onkeyup = function() {
  // 小写字母校验
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }

  // 大写字母校验
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // 数字校验
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // 特殊字符校验（已修复重名、转义错误、范围不一致问题）
  var specialCharRegex = /[#?!@$%^&*\-]/g;
  if(myInput.value.match(specialCharRegex)) {
    special.classList.remove("invalid");
    special.classList.add("valid");
  } else {
    special.classList.remove("valid");
    special.classList.add("invalid");
  }

  // 密码最小长度校验
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

注意：正则字符集内的-若放在中间位置会被解析为ASCII范围分隔符，放在末尾即可正常匹配横杠字符，保证与input的校验规则完全对齐。

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