JavaScript注册表单邮箱二次验证失效问题求助

嘿，我瞅了下你的代码，邮箱验证失效的原因很明确——你在validateMail函数里用了first_email和second_email这两个变量，但根本没给它们赋值呀！密码验证那边你是用document.getElementById正确获取了元素，邮箱这边却直接用了未定义的变量，浏览器找不到对应的DOM元素，验证逻辑自然跑不起来。

修复后的完整代码 #

<form id="signupForm">
  <input type="email" name="email" placeholder="Email Address" required="required" class="input-txt" id="email1">
  <input type="email" name="confirm_email" placeholder="Confirm Email Address" required="required" class="input-txt" id="email2">
  <br><br>
  <input id="password" type="password" name="password" placeholder="Create Password" required="required" class="input-txt">
  <input id="confirm_password" type="password" name="confirm_password" placeholder="Confirm Password" required="required" class="input-txt"><br>
  <button type="submit" class="btn">Sign up</button>
</form>

<script>
// 先获取邮箱输入框元素
const email1 = document.getElementById("email1");
const email2 = document.getElementById("email2");

function validateMail() {
  if(email1.value !== email2.value) {
    email2.setCustomValidity("Emails Don't Match");
  } else {
    email2.setCustomValidity('');
  }
}

// 绑定邮箱验证事件
email1.addEventListener('input', validateMail);
email2.addEventListener('input', validateMail);

// 密码验证部分（保留并优化事件绑定）
const password = document.getElementById("password");
const confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value !== confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.addEventListener('input', validatePassword);
confirm_password.addEventListener('input', validatePassword);

// 额外：绑定表单提交事件，确保最终验证
document.getElementById('signupForm').addEventListener('submit', function(e) {
  validateMail();
  validatePassword();
  // 如果验证不通过，阻止提交
  if(!this.checkValidity()) {
    e.preventDefault();
  }
});
</script>

关键修改点说明 #

1. 正确获取DOM元素：添加了const email1 = document.getElementById("email1");和const email2 = document.getElementById("email2");，确保函数里能拿到对应的输入框元素。
2. 替换事件绑定方式：用addEventListener('input', ...)替代onchange和onkeyup，input事件能覆盖键盘输入、鼠标粘贴、右键菜单粘贴等所有内容变更场景，验证更及时全面。
3. 修正表单name属性：把重复的name="fname"改成了更有意义的email、confirm_email、password、confirm_password，不管是前端还是后端处理都更清晰。
4. 添加表单提交终极验证：绑定表单的submit事件，在提交前再执行一次验证，防止用户通过回车等方式跳过实时验证直接提交。

额外小贴士 #

• 建议使用严格相等!==替代!=，避免隐式类型转换带来的意外问题。
• 可以给验证不通过的输入框添加样式提示，比如红色边框，提升用户体验。

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