JS表单提交中onsubmit事件return的作用

完整代码如下:

1.html

js 复制代码
 <!DOCTYPE html>
 <html>
 <head>
 <title>JS表单提交中onsubmit事件return的作用</title>
 </head>
 <body>
 <form method="post" action="2.html" onsubmit="return Checkname()">
     <input id="name" type="text" placeholder="请输入你的名字">
     <button>提交</button>
</form>
</body>
</html>

<script type="text/javascript">
    function Checkname() {
        var name=document.getElementById('name').value;
        if (!name) {
            alert('名字为空');
            return false;
        }else{
            return true;
        }
    }
</script>

2.html

js 复制代码
<!DOCTYPE html>
<html>
<head>
<title>JS表单提交中onsubmit事件return的作用</title>
</head>
<body>
    恭喜表单提交成功
</body>
</html>

代码运行效果图如下:

1.不填写名字

2.填写名字

代码分析:

当点击提交按钮(button按钮)的时候,浏览器会自动触发onsubmit事件,执行Checkname()函数。Checkname()函数通过判断名字是否存在,来返回true或者false。

当Checkname()返回false的时候,onsubmit事件可以看成为:

js 复制代码
onsubmit="return false"

当Checkname()返回true的时候,onsubmit事件可以看成为:

js 复制代码
onsubmit="return true"

重点:

此时onsubmit中return的作用就是将Checkname()函数运行返回的结果(true或者false),再向上返回(返回给浏览器)。浏览器如果接收到onsubmit返回的是false,则阻止表单提交。反之,如果接收到的是true,表单就会提交到action属性指向的2.html页面。

相关推荐
GISer_Jing7 分钟前
前端开发—全栈开发
前端·javascript
DoraBigHead15 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
Trust yourself24329 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统40 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead1 小时前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
琹箐2 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠2 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农2 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
redreamSo2 小时前
中国式好男人的悲歌:200块的饭,一个人怎么就吃不下去了?
程序员
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript