JS 停止表单提交 - Javascript

在Web开发中，表单提交是一个很常见的操作，但有时我们希望能够在提交前对表单进行一些验证或者其他的处理操作。这时，我们就需要使用Javascript来停止表单的提交。

表单提交

在HTML中，表单提交通过form元素和submit按钮实现。当用户点击提交按钮时，表单会向服务器发送请求，服务器根据请求参数进行处理并返回结果。

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="登录">
</form>

阻止表单提交

有时，我们需要在用户点击提交按钮之前进行一些操作，比如验证表单输入的格式是否正确。如果验证失败，我们希望停止表单的提交。这时，我们可以使用Javascript中的preventDefault()方法。

document.querySelector('form').addEventListener('submit', function(event) {
  // 阻止表单提交
  event.preventDefault();
  
  // 进行其他的操作
});

我们可以通过addEventListener()方法来绑定表单提交事件，然后在事件处理函数中使用preventDefault()方法来阻止表单的提交。

示例代码

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="登录">
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    // 阻止表单提交
    event.preventDefault();
  
    // 进行验证操作
    let username = document.querySelector('input[name="username"]').value;
    let password = document.querySelector('input[name="password"]').value;
    if (username === '' || password === '') {
      alert('用户名或密码不能为空');
      return;
    }
    
    // 提交表单
    this.submit();
  });
</script>

在这个示例代码中，我们首先阻止了表单的提交，然后进行了用户名和密码的验证操作。如果验证失败，我们通过alert()方法弹出提示框，并且返回了。如果验证通过，我们再次提交表单。这里使用了this.submit()方法来提交表单，因为在事件处理函数中this指向的是当前的form元素。