JavaScript密码验证规则无法实时更新？问题排查及优化建议

问题根源 #

1. 验证逻辑中断：原代码中每个规则的else分支使用return false，导致只要有一个规则不满足，后续所有规则的图标都不会被检查和更新。比如输入满足长度要求但缺少小写字母时，设置完小写字母的叉号后直接终止函数，大写、数字等规则的图标状态不会更新。
2. 提交按钮状态逻辑错误：单个规则不满足就添加disabled类，但没有统一校验所有规则是否全部达标；确认密码的逻辑中直接移除disabled，忽略了密码本身的规则是否全部满足。

修复后的完整代码 #

HTML（无需修改） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>
<div class="container">
  <form action="trial4.html">
    <div class="mb-3 mt-3">
      <label class="form-label">Password:</label>
      <input class="form-control" type="password" required="required">
    </div>
    <div class="validate">
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="len"></iconify-icon>
        Password length = 8
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="upr"></iconify-icon>
        Contains at least one uppercase letter
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="lwr"></iconify-icon>
        Contains at least one lowercase letter
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="spc"></iconify-icon>
        Contains at least one special character (!@#$%^&*.).
      </p>
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="num"></iconify-icon>
        Contains at least one numeric character
      </p>
    </div>
    <div class="mb-3 mt-3">
      <label class="form-label">Confirm Password:</label>
      <input class="form-control" type="password" required="required">
    </div>
    <div class="validate">
      <p>
        <iconify-icon icon="gridicons:cross-circle" id="match"></iconify-icon>
        Must match password
      </p>
    </div>
    <input class="btn btn-success" type="submit" />
  </form>
</div>

CSS（无需修改） #

.validate {
    display: none;
}

iconify-icon[icon="mdi:tick-circle"] {
    color: green;
}

iconify-icon[icon="gridicons:cross-circle"] {
    color: red;
}

JavaScript（修复后） #

$(document).ready(function() {
  let firstPassword,
      lenIcon = document.getElementById("len"),
      uprIcon = document.getElementById("upr"),
      lwrIcon = document.getElementById("lwr"),
      spcIcon = document.getElementById("spc"),
      numIcon = document.getElementById("num"),
      matchIcon = document.getElementById("match"),
      submitBtn = document.querySelector("input[type=submit]"),
      passwordInputs = document.querySelectorAll("input[type=password]");

  submitBtn.classList.add("disabled");
  submitBtn.disabled = true;

  // 绑定焦点/失焦显示验证面板
  passwordInputs.forEach((input, index) => {
    input.addEventListener("focus", () => {
      document.getElementsByClassName("validate")[index].style.display = "block";
    });
    input.addEventListener("blur", () => {
      document.getElementsByClassName("validate")[index].style.display = "none";
    });
  });

  // 密码验证逻辑
  firstPassword = passwordInputs[0];
  firstPassword.addEventListener("input", validatePassword);

  // 确认密码验证逻辑
  passwordInputs[1].addEventListener("input", validateConfirmPassword);

  // 校验密码所有规则并更新图标
  function validatePassword() {
    const password = this.value;
    let allRulesPass = true;

    // 长度验证
    if (password.length >= 8) {
      lenIcon.setAttribute("icon", "mdi:tick-circle");
    } else {
      lenIcon.setAttribute("icon", "gridicons:cross-circle");
      allRulesPass = false;
    }

    // 小写字母验证
    if (/[a-z]/.test(password)) {
      lwrIcon.setAttribute("icon", "mdi:tick-circle");
    } else {
      lwrIcon.setAttribute("icon", "gridicons:cross-circle");
      allRulesPass = false;
    }

    // 大写字母验证
    if (/[A-Z]/.test(password)) {
      uprIcon.setAttribute("icon", "mdi:tick-circle");
    } else {
      uprIcon.setAttribute("icon", "gridicons:cross-circle");
      allRulesPass = false;
    }

    // 特殊字符验证
    if (/[!@#$%^&*.]/.test(password)) {
      spcIcon.setAttribute("icon", "mdi:tick-circle");
    } else {
      spcIcon.setAttribute("icon", "gridicons:cross-circle");
      allRulesPass = false;
    }

    // 数字验证
    if (/[0-9]/.test(password)) {
      numIcon.setAttribute("icon", "mdi:tick-circle");
    } else {
      numIcon.setAttribute("icon", "gridicons:cross-circle");
      allRulesPass = false;
    }

    // 更新提交按钮状态
    updateSubmitButtonStatus(allRulesPass && isPasswordMatch());
  }

  // 校验确认密码
  function validateConfirmPassword() {
    const isMatch = this.value === firstPassword.value;
    if (isMatch) {
      matchIcon.setAttribute("icon", "mdi:tick-circle");
    } else {
      matchIcon.setAttribute("icon", "gridicons:cross-circle");
    }
    // 更新提交按钮状态
    updateSubmitButtonStatus(isAllPasswordRulesPass() && isMatch);
  }

  // 判断密码所有规则是否通过
  function isAllPasswordRulesPass() {
    const password = firstPassword.value;
    return password.length >= 8 &&
           /[a-z]/.test(password) &&
           /[A-Z]/.test(password) &&
           /[!@#$%^&*.]/.test(password) &&
           /[0-9]/.test(password);
  }

  // 判断密码是否匹配
  function isPasswordMatch() {
    return passwordInputs[1].value === firstPassword.value;
  }

  // 更新提交按钮状态
  function updateSubmitButtonStatus(isEnabled) {
    submitBtn.classList.toggle("disabled", !isEnabled);
    submitBtn.disabled = !isEnabled;
  }
});

进一步优化建议 #

1. 提取验证规则配置：将所有验证规则整理成数组配置，循环处理验证逻辑，减少重复代码：

const passwordRules = [
  { id: "len", test: (pwd) => pwd.length >= 8 },
  { id: "lwr", test: (pwd) => /[a-z]/.test(pwd) },
  { id: "upr", test: (pwd) => /[A-Z]/.test(pwd) },
  { id: "spc", test: (pwd) => /[!@#$%^&*.]/.test(pwd) },
  { id: "num", test: (pwd) => /[0-9]/.test(pwd) }
];

// 缓存所有规则图标
const ruleIcons = passwordRules.reduce((acc, rule) => {
  acc[rule.id] = document.getElementById(rule.id);
  return acc;
}, {});

// 验证时循环处理
function validatePassword() {
  const password = this.value;
  let allRulesPass = true;
  passwordRules.forEach(rule => {
    if (rule.test(password)) {
      ruleIcons[rule.id].setAttribute("icon", "mdi:tick-circle");
    } else {
      ruleIcons[rule.id].setAttribute("icon", "gridicons:cross-circle");
      allRulesPass = false;
    }
  });
  updateSubmitButtonStatus(allRulesPass && isPasswordMatch());
}

2. 优化正则表达式：使用test()方法替代match()，性能更优（test()找到匹配即返回结果，无需遍历所有字符）。

3. 增强用户体验：可以在验证面板添加规则完成进度提示，或者给已满足的规则添加文字高亮效果。

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