Javascript密码验证器开发问题：匹配判断错误与无刷新验证失效

核心问题1：密码匹配判断逻辑错误 #

你直接比较了pass1和pass2这两个DOM元素对象，而非它们的输入值。这两个是不同的元素对象，pass1 !== pass2永远为true，但你的逻辑里这个条件对应“不匹配”提示，完全没用到用户输入的密码内容。正确做法是比较两个输入框的value属性。

核心问题2：无效的event++操作 #

event++是错误用法，event是事件回调的事件对象，自增它没有任何意义。要实现实时验证，只需在keyup事件触发时直接调用验证函数即可。

修正后的JavaScript代码 #

<script>
       const pass1 = document.getElementById("password1");
       const pass2 = document.getElementById("password2");
       const p = document.getElementById("confirm");
       
       function passCheck() {
        // 比较两个输入框的实际输入值
        if (pass1.value !== pass2.value) {
            p.innerHTML = "Passwords do not match";
        } else {
            p.innerHTML = "Passwords match";
        }
       }
       
       // 触发keyup时直接调用验证函数
       pass2.addEventListener("keyup", passCheck);
    </script>

额外优化建议 #

• 给不同状态的提示加样式提升体验：

  if (pass1.value !== pass2.value) {
      p.innerHTML = "Passwords do not match";
      p.style.color = "red";
  } else {
      p.innerHTML = "Passwords match";
      p.style.color = "green";
  }
  

• 监听第一个密码框的keyup事件，修改原密码时也触发验证：

  pass1.addEventListener("keyup", passCheck);
  pass2.addEventListener("keyup", passCheck);
  

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