js阻止表单提交的两种方法

最新推荐文章于 2022-08-16 00:37:39 发布

weixin_33738555

最新推荐文章于 2022-08-16 00:37:39 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/485223

本文介绍了一种通过JavaScript阻止HTML表单默认提交行为的方法，包括使用event.preventDefault()及onsubmit属性实现。提供了具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <form action="clock.html" method="post" onsubmit="return checkLength()">
        <p>name:<input type="text" name="user" id="user"></p>
        <input type="submit" id="submit" name="submit"> 
    </form>
</body>
</html>

~~~

clock.html是一个时钟页面。

第一种方法：利用event的阻止默认事件机制，页面载入之后获得submit元素，然后为submit注册click响应函数，参数为event事件。

在用户点击submit触发响应函数后，直接event.preventDefault();阻止表单转跳的默认事件。

第二种方法：在表单form标签下属性onsubmit="return checkLength()"（ie能实现，谷歌不能实现）或 id="submit"的input标签下添加属性 checkLength()"

上面的代码是两种方法的集合，可自己删减。

本文转自曦羽 51CTO博客，原文链接:http://blog.51cto.com/exist/1955965