求助：输入错误注册码时无法阻止表单提交的问题

嘿，我完全懂你的困扰！你写的校验函数确实能弹出错误提示，但没法真正拦住表单提交——问题出在你没把校验函数的返回值和表单的提交逻辑绑定好，光返回false没用，得让表单知道要根据这个返回值决定要不要提交才行。

我给你两种解决方案，原生JS和jQuery的都有：

原生JS解决方案 #

首先，核心要改的是表单的onsubmit属性，必须加上return，让表单接收校验函数的返回值。然后顺便给你的代码优化下细节：

修正后的JS函数

function checkCode() {
  const codeInput = document.getElementById("compcode");
  // 先去掉输入值前后的空格，避免用户不小心输入空格导致校验失败
  const inputCode = codeInput.value.trim();
  
  if (inputCode === "490023a") {
    alert("You have entered the correct registration code, please proceed");
    return true;
  } else {
    alert("You have entered an incorrect registration code, please try again");
    // 自动聚焦到输入框，方便用户重新输入
    codeInput.focus();
    return false;
  }
}

对应的表单写法

注意onsubmit里的return checkCode()，少了这个return，表单根本不会理会函数返回的false：

<form onsubmit="return checkCode()">
  <input type="text" id="compcode" placeholder="Enter your registration code">
  <!-- 你的其他表单字段 -->
  <button type="submit">Submit Form</button>
</form>

jQuery解决方案 #

如果想用jQuery，我们可以直接监听表单的submit事件，用event.preventDefault()来阻止默认提交行为，代码更灵活：

完整代码示例

<!-- 先确保页面引入了jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<form id="regForm">
  <input type="text" id="compcode" placeholder="Enter your registration code">
  <!-- 其他表单元素 -->
  <button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
  $("#regForm").on("submit", function(e) {
    const inputCode = $("#compcode").val().trim();
    
    if (inputCode === "490023a") {
      alert("You have entered the correct registration code, please proceed");
      return true;
    } else {
      alert("You have entered an incorrect registration code, please try again");
      $("#compcode").focus();
      // 阻止表单的默认提交动作
      e.preventDefault();
      return false;
    }
  });
});
</script>

额外提醒 #

• 前端校验只是给用户友好提示，千万不要依赖它做安全校验！真正的注册码验证必须在后端做，因为前端代码可以被轻易篡改，恶意用户能跳过前端校验直接提交表单。
• 可以给输入框加个onblur事件，让用户输入完就实时校验，体验更好~

内容来源于stack exchange