onsubmit未触发JavaScript函数，排查后仍无法定位问题求助

我来帮你分析下onsubmit事件没触发的常见问题，结合你给出的代码片段，大概率是这几个地方出了问题：

1. onsubmit绑定缺少return关键字 #

很多人会忽略这一点：表单的onsubmit属性必须写成onsubmit="return validateLogin()"，而不是只写validateLogin()。如果函数返回false（验证不通过），不加return的话，浏览器不会阻止表单的默认提交行为，看起来就像事件没触发一样。

2. 代码中的语法错误 #

你代码里的document.Log.getElementById("nameLoc")是错误的写法！getElementById是document对象的专属方法，不能通过表单元素（比如document.Log）来调用，正确的写法应该是document.getElementById("nameLoc")。这个语法错误会导致函数执行到这里就抛出异常，后续逻辑中断，自然无法完成验证，也会让你误以为事件没触发。

3. 函数未返回验证状态 #

你的代码里定义了status=false，但没有在函数末尾返回这个状态值。函数默认返回undefined，浏览器会把它当作true处理，直接提交表单，完全不会执行你的验证逻辑。必须在函数最后加上return status;，让浏览器根据验证结果决定是否提交表单。

4. 表单和元素的name属性不匹配 #

你用document.Log.username来获取输入框值，这要求你的表单name属性必须是Log，用户名输入框的name必须是username，密码输入框的name必须是password，否则会获取不到值，导致验证逻辑出错。

修正后的示例代码 #

这里给你一个完整的可运行示例，你可以参考调整：

<form name="Log" onsubmit="return validateLogin()">
  <div>
    用户名：<input type="text" name="username">
    <span id="nameLoc" style="color: red;"></span>
  </div>
  <div>
    密码：<input type="password" name="password">
    <span id="passwordLoc" style="color: red;"></span>
  </div>
  <button type="submit">登录</button>
</form>

<script>
function validateLogin() {
  var nameCheck = document.Log.username.value.trim();
  var passwordCheck = document.Log.password.value.trim();
  var status = true;
  var nameErrorEl = document.getElementById("nameLoc");
  var passwordErrorEl = document.getElementById("passwordLoc");

  // 用户名验证
  if (nameCheck.length < 4) {
    nameErrorEl.innerHTML = "用户名长度不能少于4位";
    status = false;
  } else {
    nameErrorEl.innerHTML = "";
  }

  // 密码验证
  if (passwordCheck.length < 6) {
    passwordErrorEl.innerHTML = "密码长度不能少于6位";
    status = false;
  } else {
    passwordErrorEl.innerHTML = "";
  }

  return status;
}
</script>

额外排查点 #

如果上面的调整还是解决不了问题，你可以检查这两个地方：

• 提交按钮的type属性是否是submit：如果是button，点击不会触发onsubmit事件，需要改成type="submit"，或者在按钮的onclick事件里手动调用validateLogin()并控制表单提交。
• 是否有其他JS代码干扰：比如用addEventListener绑定了表单的submit事件，并且调用了event.preventDefault()但没有正确处理验证逻辑。

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