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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
一只叫煤球的猫4 小时前
【🤣离谱整活】我写了一篇程序员掉进 Java 异世界的短篇小说
java·后端·程序员
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui