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

相关推荐
ruanhongbiao1 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风3 分钟前
JS执行机制-event loop
javascript
止观止3 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
1024小神4 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵5 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
20266 分钟前
11. vite打包优化
前端·javascript·vite
大葱白菜15 分钟前
🧩 Java 枚举详解:从基础到实战,掌握类型安全与优雅设计
java·程序员
1024小神15 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
大葱白菜18 分钟前
🧱 Java 抽象类详解:从基础到实战,掌握面向对象设计的核心基石
后端·程序员
SimonKing24 分钟前
颠覆传统IO:零拷贝技术如何重塑Java高性能编程?
java·后端·程序员