JS表单提交中onsubmit事件return的作用
2020/2/8 4:21:27
本文主要是介绍JS表单提交中onsubmit事件return的作用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
完整代码如下:
1.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS表单提交中onsubmit事件return的作用</title> 5 </head> 6 <body> 7 <form method="post" action="2.html" onsubmit="return Checkname()"> 8 <input id="name" type="text" placeholder="请输入你的名字"> 9 <button>提交</button> 10 </form> 11 </body> 12 </html> 13 14 <script type="text/javascript"> 15 function Checkname() { 16 var name=document.getElementById('name').value; 17 if (!name) { 18 alert('名字为空'); 19 return false; 20 }else{ 21 return true; 22 } 23 } 24 </script>
2.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS表单提交中onsubmit事件return的作用</title> 5 </head> 6 <body> 7 恭喜表单提交成功 8 </body> 9 </html>
代码运行效果图如下:
1.不填写名字
2.填写名字
代码分析:
当点击提交按钮(button按钮)的时候,浏览器会自动触发onsubmit事件,执行Checkname()函数。Checkname()函数通过判断名字是否存在,来返回true或者false。
当Checkname()返回false的时候,onsubmit事件可以看成为:
onsubmit="return false"
当Checkname()返回true的时候,onsubmit事件可以看成为:
onsubmit="return true"
重点:
此时onsubmit中return的作用就是将Checkname()函数运行返回的结果(true或者false),再向上返回(返回给浏览器)。浏览器如果接收到onsubmit返回的是false,则阻止表单提交。反之,如果接收到的是true,表单就会提交到action属性指向的2.html页面。
这篇关于JS表单提交中onsubmit事件return的作用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南