用onsubmit进行Form表单验证

可以使用 onsubmit 属性来执行表单验证。这个属性定义在 form 元素上，可以在表单提交时调用 JavaScript 函数。当表单提交时，如果该函数返回 false，则表单不会提交。

以下是一个使用 onsubmit 属性进行表单验证的例子：

HTML 代码：

<form id="myForm" action="submit.php" method="post" onsubmit="return validateForm()">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript 代码：

<script>
  function validateForm() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username == "") {
      alert("Username cannot be empty");
      return false;
    }

    if (password == "") {
      alert("Password cannot be empty");
      return false;
    }

    return true;
  }
</script>

在这个例子中，我们在 form 元素上定义了 onsubmit 属性，值为 validateForm() 函数。当表单提交时，会调用这个函数进行验证。如果用户名或密码为空，会弹出一个警告框，并返回 false，阻止表单提交。如果验证通过，会返回 true，表单会继续提交。