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页面。