1. 90前端首页
  2. 前端开发
  3. JavaScript

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.不填写名字
JS表单提交中onsubmit事件return的作用

2.填写名字
JS表单提交中onsubmit事件return的作用

代码分析:

当点击提交按钮(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页面。

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021636748

展开阅读全文

发表评论

登录后才能评论