表单提交验证：onsubmit与return详解

表单的 onsubmit="return loginCheck(this)" 这段代码，核心需求应该是想深入理解这行代码的作用、语法细节:

一、逐字拆解这行代码的含义

1. onsubmit

这是 HTML 表单的提交事件属性 ，当用户点击表单的提交按钮（<button type="submit">）或按回车键提交表单时，会触发这个属性里的代码。

2. return

这是关键！它的作用是将 loginCheck(this) 函数的返回值传递给 onsubmit 事件：

• 如果 loginCheck(this) 返回 false → onsubmit 收到 false → 浏览器阻止表单提交（这是表单验证的核心目的）；
• 如果 loginCheck(this) 返回 true → onsubmit 收到 true → 浏览器正常提交表单（跳转到 action 地址或提交数据）。

⚠️ 易错点：如果少写 return，只写 onsubmit="loginCheck(this)"，哪怕函数返回 false，表单也会提交！因为 onsubmit 没有收到返回值，默认按 true 处理。

3. loginCheck(this)

• loginCheck：你自定义的表单验证函数（比如上一轮代码里的校验用户名 / 密码的函数）；
• this：在表单的 onsubmit 事件中，this 指向当前表单元素本身 （即 <form> 标签对应的 DOM 对象），把表单对象传给函数，就能在函数里直接获取表单内的输入框值（如 form.username.value）。

二、对比理解：写与不写 return 的区别

代码写法	函数返回 false	函数返回 true
onsubmit="loginCheck(this)"	表单仍会提交	表单提交
onsubmit="return loginCheck(this)"	表单被阻止提交	表单提交

三、简化示例（只看核心逻辑）

html

预览

<form onsubmit="return checkForm(this)" method="post">
  <input name="username" placeholder="用户名">
  <button type="submit">提交</button>
</form>

<script>
function checkForm(form) {
  // 校验用户名是否为空
  if (form.username.value.trim() === '') {
    alert('用户名不能为空！');
    return false; // 返回false，阻止提交
  }
  return true; // 校验通过，允许提交
}
</script>

总结

1. onsubmit="return loginCheck(this)" 的核心是通过函数返回值控制表单是否提交 ，少写 return 会导致验证失效；
2. this 是把当前表单对象传给验证函数，方便函数内获取输入框的值；
3. 验证函数返回 false 阻止提交（校验失败），返回 true 允许提交（校验成功）。

---

onsubmit 是 HTML 中的一个事件属性，用于在表单（<form>）提交时触发 JavaScript 代码。它通常用于表单验证、阻止默认提交行为，或在提交前执行某些操作。

基本语法

html

<form onsubmit="return myFunction()">
  <!-- 表单内容 -->
  <input type="submit" value="提交">
</form>

关键点：

• 如果 onsubmit 中的函数 返回 false ，则会阻止表单的默认提交行为。
• 如果返回 true 或没有返回值，则表单会正常提交（可能跳转页面或发送数据）。
• 通常配合 event.preventDefault() 使用（在现代 JavaScript 中更推荐这种方式）。

---

示例 1：使用 onsubmit 阻止无效提交

html

<form onsubmit="return validateForm()">
  <input type="text" id="email" placeholder="请输入邮箱">
  <input type="submit" value="提交">
</form>

<script>
function validateForm() {
  const email = document.getElementById('email').value;
  if (!email.includes('@')) {
    alert('请输入有效的邮箱地址！');
    return false; // 阻止提交
  }
  return true; // 允许提交
}
</script>

---

示例 2：现代写法（推荐）

使用 addEventListener 而不是内联 onsubmit，代码更清晰、可维护性更高：

html

<form id="myForm">
  <input type="text" id="email" placeholder="邮箱">
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  const email = document.getElementById('email').value;
  if (!email.includes('@')) {
    alert('邮箱格式错误！');
    event.preventDefault(); // 阻止默认提交
  }
});
</script>

---

注意事项：

• <input type="submit"> 或 <button type="submit"> 才会触发表单的 submit 事件。
• 按 Enter 键在某些输入框中也会触发表单提交（取决于浏览器和表单结构）。
• onsubmit 只对 <form> 元素有效，不能用于其他标签。