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

相关推荐
Monly2118 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
小桥风满袖18 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
超人不会飛18 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
艾小码19 小时前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js
艾小码19 小时前
还在手动加载全部组件?这招让Vue应用性能飙升200%!
前端·javascript·vue.js
三十_19 小时前
【实录】多 SDK 日志乱象的解决方案:统一日志 SDK 设计分享
前端·javascript
Samsong19 小时前
JavaScript逆向之对称加密算法
javascript·逆向
一枚前端小能手19 小时前
🛡️ Token莫名其妙就泄露了?JWT安全陷阱防不胜防
前端·javascript·安全
用户2373903314719 小时前
ESP32头文件路径
程序员
李游Leo19 小时前
JavaScript事件机制与性能优化:防抖 / 节流 / 事件委托 / Passive Event Listeners 全解析
开发语言·javascript·性能优化