HTML表单onsubmit事件失效，表单直接提交的原因是什么？-html教程-PHP中文网

HTML表单onsubmit事件失效，表单直接提交的原因是什么？

花韻仙語

发布： 2025-03-01 18:34:01

原创

721人浏览过

HTML表单onsubmit事件失效，表单直接提交的原因是什么？

html表单onsubmit事件失效，导致表单直接提交的常见原因及解决方法

在使用HTML表单进行数据提交时，onsubmit事件通常用于执行客户端验证。然而，有时onsubmit="return check();"语句看似失效，表单会直接提交到服务器。本文将分析一个案例，并探讨可能原因及解决方案。

问题描述：

用户反馈表单提交时，即使添加了onsubmit="return check();"事件，表单仍然直接跳转到action="postreg.php"页面，客户端验证函数check()未执行。代码片段如下：

(原代码中存在拼写错误，此处已修正)

立即学习“前端免费学习笔记（深入）”；

function check(){
    let username = document.getElementsByName('username')[0].value.trim();
    let usermail = document.getElementsByName('usermail')[0].value.trim();
    let password = document.getElementsByName('password')[0].value.trim();

    let usernamereg = /^[a-zA-Z0-9]{3,10}$/;
    if(!usernamereg.test(username)) {
        alert('用户名必填，且只能由大小写字母和数字构成，长度为3到10个字符。');
        return false;
    }
    //其他验证代码
}

登录后复制

问题分析及解决方案：

经检查，发现问题根源在于原代码中username变量名存在拼写错误（usermane）。由于此错误，username始终无法获取正确的值，导致条件判断始终为假，return false语句不被执行，从而表单直接提交。

以下是修正后的代码示例，包含更简洁的HTML结构：

<form action="postreg.php" onsubmit="return check();">
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="usermail" placeholder="邮箱">
  <input type="password" name="password" placeholder="密码">
  <input type="submit" value="立即注册">
</form>

<script>
function check(){
    let username = document.getElementsByName("username")[0].value.trim();
    let usernamereg = /^[a-zA-Z0-9]{3,10}$/;
    if(!usernamereg.test(username)) {
        alert('用户名必填，且只能由大小写字母和数字构成，长度为3到10个字符。');
        return false;
    }
    // 其他验证代码
    return true; // 添加return true，确保表单在验证通过时正常提交
}
</script>

登录后复制

修正后的代码解决了username变量名的拼写错误，确保客户端验证函数能够正确获取用户名并进行验证。此外，添加了return true;，确保验证通过后表单能够正常提交。如果问题依然存在，请检查浏览器兼容性或其他潜在的JavaScript错误。建议使用浏览器的开发者工具调试JavaScript代码，以定位更精确的错误。

以上就是HTML表单onsubmit事件失效，表单直接提交的原因是什么？的详细内容，更多请关注php中文网其它相关文章！