如何阻止Bootstrap表单提交时跳过自定义邮箱验证？

嘿，我帮你梳理下问题所在以及修复方案：

你的代码里有两个关键问题导致自定义验证被跳过：

• 正则校验方式错误：不能直接用!==把字符串和正则表达式做比较，得用正则对象的test()方法来检测字符串是否匹配规则
• 未阻止表单默认提交行为：当你点击type="submit"的按钮时，浏览器会自动触发表单的默认提交流程，这会优先执行HTML5的表单验证（比如required和type="email"的默认校验），直接跳过你的自定义JS逻辑

下面是修改后的完整代码，完全保留Bootstrap的样式，同时让自定义验证生效：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

<script>
$("#submit").click(function(event) {
  // 阻止表单默认提交行为，让自定义逻辑优先执行
  event.preventDefault();
  
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();
  
  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } 
  // 用正则test()方法正确校验邮箱格式
  else if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email)) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
  } 
  else {
    swal({
      title: "Good job!",
      text: "Your subscription has been registered",
      icon: "success",
      button: "Awesome!",
    });
    // 如果验证通过需要提交表单，可以取消下面的注释：
    // $(this).closest('form').submit();
  }
});
</script>

关键修改点说明： #

1. 阻止默认提交：添加event.preventDefault()，让浏览器不会自动提交表单，转而执行你的自定义验证逻辑
2. 修正邮箱校验：把email !== /.../改成!/.../.test(email)，test()方法会返回布尔值，准确判断邮箱是否符合规则
3. 小细节修正：把原代码里的You're subscriptions改成了Your subscription，修正了语法错误

如果后续需要在验证通过后真正提交表单，只需要在else块的最后取消$(this).closest('form').submit();的注释即可，这样就能在自定义验证通过后触发表单的正常提交流程。

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