如何在form的action=send.php执行前校验输入？onsubmit执行顺序解析

嘿，这个问题问到点子上了，很多刚接触表单校验的开发者都会在这里踩坑，我给你讲得明明白白：

核心执行顺序 #

当你点击表单的「SEND」按钮时，浏览器会先执行onsubmit属性里指定的CheckInput()函数，之后才会决定是否触发向send.php的提交请求——不是不管校验结果都直接提交的，关键看你的函数怎么写。

决定提交与否的关键：返回值 #

这里有个很重要的细节：你的CheckInput()函数的返回值，直接控制着表单是否继续提交：

• 如果函数返回false：浏览器会立刻终止表单的提交流程，不会发送任何请求到send.php，刚好适合你校验失败（比如输入为空）的场景
• 如果函数返回true，或者没有明确返回值：浏览器会认为校验通过，继续执行默认的提交行为，把表单数据发送到send.php

你当前代码的隐藏坑 #

你现在的onsubmit="CheckInput()"写法有个容易忽略的问题：就算CheckInput()返回了false，这个返回值不会被传递给onsubmit事件，浏览器还是会默认提交表单。正确的写法是要加上return，也就是：

<form action="send.php" onsubmit="return CheckInput()">

完整的校验示例代码 #

给你补全符合需求的代码，这样输入为空时会变红边框，同时阻止提交：

<form action="send.php" onsubmit="return CheckInput()">
  <label for="name">Name:</label>
  <input type="text" id="name">
  <input type="submit" value="SEND">
</form>

<script>
function CheckInput() {
  const nameInput = document.getElementById('name');
  // 去掉输入内容的首尾空格，判断是否为空
  const inputValue = nameInput.value.trim();
  
  if (!inputValue) {
    // 输入为空时，设置红色边框
    nameInput.style.border = '2px solid #ff4444';
    // 返回false阻止表单提交
    return false;
  }
  
  // 校验通过，返回true允许提交（也可以不写，因为默认返回undefined，浏览器会当作true处理）
  return true;
}
</script>

完整流程梳理 #

1. 用户点击「SEND」按钮
2. 浏览器触发表单的onsubmit事件，执行return CheckInput()
3. 进入CheckInput()函数，获取输入框的值并校验
4. 如果输入为空：设置红色边框，返回false，浏览器终止提交，不会调用send.php
5. 如果输入有效：返回true，浏览器继续执行提交，把表单数据发送到send.php

内容的提问来源于stack exchange，提问作者user7998549