JS表单提交中onsubmit事件return的作用详解
更新时间：2023年10月08日 10:13:42 作者：Winn
这篇文章主要为大家介绍了JS表单提交中onsubmit事件return的作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
JS表单提交中onsubmit事件return的作用
1.html
<!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
<!DOCTYPE html> <html> <head> <title>JS表单提交中onsubmit事件return的作用</title> </head> <body> 恭喜表单提交成功 </body> </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页面。
以上就是JS表单提交中onsubmit事件return的作用详解的详细内容，更多关于JS表单提交onsubmit事件return的资料请关注脚本之家其它相关文章！
相关文章
多行输入框组件是原生组件,这篇文章主要给大家介绍了关于微信小程序输入多行文本的相关资料,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了微信小程序 参数传递实例代码的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS无缝滚动效果实现方法,结合实例形式较为详细的分析了无缝滚动的原理、实现技巧与相关注意事项,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了js前端日历控件，可根据日期自定义日历上某日的颜色，另外可以悬浮，拖拽，自由变形2017-03-03
这篇文章主要介绍了js 解析 JSON 数据的方法,结合简单实例形式分析了js 解析 JSON 格式数据的相关操作技巧与注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了JavaScript实现计算器，下面文章实现计算器作为学习期间的一个小练习，需要的小伙伴可以参考一下，希望对你有所帮助2022-01-01
这篇文章主要介绍了javascript弹出层输入框(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
JavaScript实现简易的天数计算器实例【附demo源码下载】
这篇文章主要介绍了JavaScript实现简易的天数计算器,结合实例形式分析了javascript日期与时间计算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了服务端预渲染之Nuxt(使用篇)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论