form中onsubmit的使用

最新推荐文章于 2022-11-12 23:33:35 发布

梧桐下的四叶草

最新推荐文章于 2022-11-12 23:33:35 发布

阅读量634

点赞数

分类专栏： HTML5 文章标签： javascript html html5

HTML5 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了 HTML 中 form 的 onsubmit 事件如何用于提交前的数据验证，包括如何正确使用 return 值来控制表单提交行为，并给出了具体的示例代码。

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

转载自：http://blog.youkuaiyun.com/moqiang02/article/details/18414363

form 中的onsubmit在点submit按钮时被触发，如果return false;则结果不会被提交到action中去（也就是提交动作不会发生），如果不返回或者返回true，则执行提交动作。（<a onclick=”return confirm(‘是否跳转到百度？’);” href=”http://www.baidu.com”>baidu</a>也同理）,下面是一个例子程序。

[html]view plaincopy 
   
 <!doctype html>  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>html form onsubmit使用</title>  
 <script type="text/javascript">  
     alert("加载此页面时执行");  
     function buttonSubmit(){  
         document.form1.submit();  
     }  
 </script>  
 </head>  
 <body>  
     <a onclick="return confirm('是否跳转到百度？');" href="http://www.baidu.com">baidu</a>  
     <form name="form1" onsubmit="return confirm('是否进行提交？');">  
         <input type="submit" value="submit" />  
         <input type="button" value="button" onClick="buttonSubmit();"  
     </form>   
 </body>  
 </html>  

结论：
1.如果html中使用form的onsubmit进行提交前的数据验证，需要验证函数返回一个布尔值，而且要写成onsubmit=”return 函数名();” return不能少，否则无论函数返回true还是false都能够提交，达不到验证的目的。
2.只能使用sunmit按钮进行提交才触发onsubmit事件，button按钮的提交不能触发onsubmit事件。