表单onsubmit事件失效，如何排查并解决？-html教程-PHP中文网

表单onsubmit事件失效，如何排查并解决？

聖光之護

发布： 2025-03-01 18:32:11

原创

547人浏览过

表单onsubmit事件失效，如何排查并解决？

html表单onsubmit事件失效的排查与修复

在网页开发中，表单提交是常见操作，而onsubmit事件常用于表单数据校验。然而，onsubmit事件有时会失效，导致表单直接提交，本文将分析并解决onsubmit="return check();"失效的问题。

问题：

用户反馈，表单使用onsubmit="return check();"调用JavaScript校验函数check()，但表单直接提交到postreg.php，check()函数未执行。HTML代码如下：

<div class="user">  </div><div class="mailbox">  </div><div class="pass">  </div><div class="pass">  </div><div class="button"> 立即注册 </div><div class="register"><div class="registers">[返回登录](login.html)</div><div class="wjmm">[忘记密码](wjmm.html)</div> </div>
<script>
function check(){
    let username = document.getElementsByName('usermane')[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;
    }
}
</script>

登录后复制

分析与解决：

问题在于JavaScript校验函数check()中的拼写错误。document.getElementsByName('usermane')应为document.getElementsByName('username')。

修正后的代码：

<meta charset="UTF-8">
<div class="user">  </div><div class="mailbox">  </div><div class="pass">  </div><div class="pass">  </div><div class="button"> 立即注册 </div><div class="register"><div class="registers">[返回登录](login.html)</div><div class="wjmm">[忘记密码](wjmm.html)</div> </div>
<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>

登录后复制

更正拼写错误后，onsubmit事件应能正常工作。如果问题仍然存在，建议检查浏览器缓存，或尝试不同的浏览器，并确保

以上就是表单onsubmit事件失效，如何排查并解决？的详细内容，更多请关注php中文网其它相关文章！