js阻止页面提交表单提交

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  // 这里可以添加自定义逻辑，如数据验证或异步提交
  console.log('Form submission prevented');
});
</script>

<form onsubmit="return validateForm()">
  <input type="text" name="username" required>
  <button type="submit">Submit</button>
</form>

<script>
function validateForm() {
  // 自定义验证逻辑
  if (document.forms[0].username.value === "") {
    alert("Username must be filled out");
    return false; // 阻止表单提交
  }
  return true; // 允许表单提交
}
</script>

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault();   // 阻止默认行为
  // 自定义逻辑
});
</script>