嵌入CSS与JavaScript的HTML表单校验功能失效问题求助

问题定位与修复方案 #

核心问题清单 #

• 密码匹配逻辑完全错误：checkPassword 函数中直接对比两个密码输入框的DOM元素对象，而非输入的内容值，不管用户输入的密码是否一致，两个DOM对象永远不相等，所以永远提示密码不匹配。
  修复方式：取两个输入框的.value属性再对比：

  function checkPassword() {
    var pw1 = document.getElementById("Password").value;
    var pw2 = document.getElementById("RepeatPassword").value;
    if (pw1 !== pw2) {
      document.getElementById("messagePWD").innerHTML = "Passwords did not match";
      return false;
    } else {
      document.getElementById("messagePWD").innerHTML = "Password created successfully";
      return true;
    }
  }
  

• 空值校验逻辑漏洞：姓名、地址字段的正则用了*匹配符，空字符串也能通过校验，用户未输入内容时也会提示"Input accepted"，不符合必填要求。
  修复方式：将正则里的*替换为+，强制要求至少输入1个符合规则的字符，例如姓名正则改为 /^[a-zA-Z\s]+$/，地址正则改为 /^[0-9a-zA-Z\s]+$/。
• 重复密码校验触发时机错误：重复密码输入框的checkField5绑定了onfocus事件，用户刚点击输入框还没输入内容就会触发校验提示错误，体验异常。
  修复方式：将onfocus="checkField5();"改为onblur="checkField5();"，和其他字段保持一致，失去焦点时再校验。
• 未阻止校验不通过时的表单提交：当前所有校验仅做提示，即使输入不符合规则，点击提交按钮表单仍会直接提交到/submit.php，没有拦截逻辑。
  修复方式：
  1. 给form标签添加提交校验事件：<form name="RegForm" action="/submit.php" method="post" onsubmit="return validateForm()">
  2. 新增全量校验函数：

  function validateForm() {
    // 依次调用所有单字段校验，若有任意一个校验不通过则阻止提交
    checkField1();
    checkField2();
    checkField3();
    checkField4();
    checkField5();
    const pwdValid = checkPassword();
    // 可扩展判断所有字段提示是否为Input accepted，此处简化判断密码匹配即可
    return pwdValid;
  }
  

• 非功能性小问题：HTML中的注释写法错误，<! If you click... >不是标准HTML注释，应改为<!-- If you click... -->；CSS中div的100px黑边规则无实际作用，可删除避免后续加div时样式异常。

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