JavaScript中密码比对功能异常问题求助

嘿，我帮你揪出了几个导致功能失效的关键问题，咱们一步步来修正：

1. DOM方法拼写错误（最核心的问题） #

JavaScript是大小写敏感的，你写的document.getElementID()是错误的，正确的方法名是document.getElementById()——注意是ById（小写的d）。这个错误会直接导致无法获取输入框的值，整个比对逻辑根本跑不起来。

2. 函数命名冲突 #

你把函数命名为click()，但这个名字和浏览器元素内置的click()方法重名了，容易引发上下文冲突。建议改成更语义化的名字，比如validatePasswordMatch()。

3. 语法细节与体验优化 #

• 变量声明里的逗号后最好加空格，提升可读性；另外推荐用let替代var，符合现代JavaScript规范。
• 提示文本里的didnt应该修正为didn't，避免语法错误的观感。

修正后的完整代码 #

HTML部分 #

<form>
  <label>
    <strong>Username</strong>
    <input type="text" name="">
  </label>
  <label>
    <strong>Password</strong>
    <input type="password" name="" id="password">
  </label>
  <label>
    <strong>Confirm Password</strong>
    <input type="password" name="" id="confirmpassword">
  </label>
  <button class="button" type="submit" id="button" onclick="validatePasswordMatch();">Submit</button>
</form>

JavaScript部分 #

function validatePasswordMatch() {
  let password = document.getElementById('password').value,
      confirmpassword = document.getElementById('confirmpassword').value;

  if (password === "") {
    alert("Field cannot be empty.");
  } else if (password !== confirmpassword) {
    alert("Password didn't match, try again.");
    return false;
  } else {
    alert("Password Match");
  }
  return false;
}

另外补充一点：如果要更严谨的话，建议给表单添加onsubmit事件监听（而不是按钮的onclick），这样能更好地阻止表单默认提交行为，比如：

<form onsubmit="return validatePasswordMatch();">
  <!-- 表单内容不变 -->
  <button class="button" type="submit" id="button">Submit</button>
</form>

对应的JS里保持return false即可，这样即使用户按回车提交也能触发校验。

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