HTML | onsubmit 事件属性

在HTML中，onsubmit事件属性用于在表单提交之前执行JavaScript代码。通过这个属性可以实现对表单数据的验证、格式化或其他逻辑的处理。

使用方法

可以将onsubmit属性添加到<form>标签中，其值为一个JavaScript函数名或JavaScript代码。

例如：

<form onsubmit="return validateForm()">
  <!-- 表单内容 -->
</form>

这里将validateForm()函数作为onsubmit属性的值，表示在表单提交之前会执行该函数。

或者直接写入JavaScript代码：

<form onsubmit="if (!validateForm()) return false; alert('表单提交成功！');">
  <!-- 表单内容 -->
</form>

这里的逻辑是先执行validateForm()函数，如果返回false则表单不提交，否则提交成功并弹出提示框。

返回值

onsubmit事件的函数需要返回true或false，用于决定是否提交表单。

• 如果返回true，表示表单提交正常进行。
• 如果返回false，则表单不会提交，同时也不会刷新页面。

示例代码

下面是一个简单的表单验证示例代码：

<form onsubmit="return validateForm()">
  <input type="text" id="username" placeholder="请输入用户名"><br>
  <input type="password" id="password" placeholder="请输入密码"><br>
  <button type="submit">提交</button>
</form>

<script>
function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  if (username == "" || password == "") {
    alert("用户名和密码不能为空！");
    return false;
  }
  return true;
}
</script>

这里的validateForm()函数获取到用户名和密码的值，然后判断它们是否为空。如果为空，则弹出提示框并返回false，组织表单提交；否则返回true，表单提交成功。

参考链接

• HTML onsubmit Event Attribute