JS中onsubmit禁止提交表单的三种方式_onsubmit阻止表单提交-程序员宅基地

技术标签： JS onsubmit

JS中onsubmit禁止提交表单的三种方式

前面我在博客中写过onblur实现失焦调用函数的三种方式, onsubmit也几乎一模一样, 不过昨天我在写一个表单提交页面,判断某些必填项未填写则禁止提交, 我们知道onsubmit是否提交取决于它的值,true则提交,false则禁止提交; 当在调用判断函数时返回值为false却也提交了…于是我查了资料,并把JS触发事件研究了一下,总结如下:

第一种方式

匿名函数直接调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=function(ev) {//匿名函数直接调用
        return false;
    }


</script>


</body>
</html>

实际上, 有名函数也可以直接调用,如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=function fun(ev) {//有名函数也可以被直接调用, 另外几个JS触发事件也或许适用
        return false;
    }


</script>


</body>
</html>

第二种方式

先声明函数,再调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=fun;//调用函数
    
        function fun(ev) {//声明函数
        return false;
    }


</script>


</body>
</html>

先声明函数,再调用函数实现没问题,可是如果匿名函数返回用一个变量接收,看起来这个变量像一个对象(Js中很多对象不要new就可以使用), 其实它就只是一个变量,比如这样写就不行:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=fun;//调用,可是这是变量,而不是对象
        var fun=function(ev) {//赋值给变量
        return false;
    }


</script>


</body>
</html>

第三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit" onsubmit="return fun()">//调用方法前面一定要加 return
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>

        function fun(ev) {
        return false;
    }


</script>


</body>
</html>

这种方式在标签上调用函数, 因为onsubmit要接收一个Boolean值, 在onblur那篇博客我讲过, js中’=’ 相当于java中的’.’ 调用的意思, 因此只写’='onsubmit无法获取Boolean值, 也许你会问为什么第一二种不用return, 那是因为第一二种onsubmit是直接在JS代码块内调用,而第三种是在标签内调用,第三种onsubmit相当于标签的一个属性, 反正我是强行解释…

本文链接：https://blog.csdn.net/qq_30359369/article/details/99608397

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

以MapBox为核心构建Vue地图组件库教程_vue 省份地图组件库-程序员宅基地

文章浏览阅读951次。不多废话直接讲干货，首先我们要清楚如何写一套组件库，类似于使用vue编写的elementui，使用react编写的antdesign等，我们现在要以GIS为核心写组件库，其实原理类似。一个是组件的主体vue文件，另一个是将组件局部暴露出去的index.js文件，当然你可以再此基础上增加你想要的其他的js文件和vue文件，上面讲的两个文件是必须的。这行命令可以将你写的组件库打包成压缩文件，一般是一个dist静态目录，在进行npm发布的时候也是将这个静态的dist发布在官网上。_vue 省份地图组件库

【控制control】四足机器人弹簧加载倒立摆（SLIP）动力学模型_【控制control】四足机器人动力学模型-slip-程序员宅基地

文章浏览阅读4.9k次，点赞5次，收藏32次。系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加TODO:写完再整理文章目录系列文章目录前言1.动力学建模构型方法2.四足机器人动力学模型（1）多体动力学模型【针对躯干+脚建模】方法一：VMC（ Virtual Model Controller）模型方法二：SLIP模型（2）浮基单体动力学模型【针对躯干建模】【用于MPC】前言认知有限，望大家多多包涵，有什么问题也希望能够与大家多交流，共同成长！本文先对四足机器人动力学模型-VMC、SLIP和浮动机体模型做个简_【控制control】四足机器人动力学模型-slip

html5手指点击速度,CPS手速测试 - 鼠标点击速度测试插件-程序员宅基地

文章浏览阅读1.2w次。CPS手速测试插件背景简介为了刺激客户的消费很多购物平台都推出来秒杀抢购的活动，在这个活动中如果你的手速慢就抢不到商品，所以有时我们会需要锻炼一下自己的手速，那如何知道自己的手速是快还是慢呢，在世界平均范围中又处于何种地步，今天小编为大家推荐一款可以检测自己手速的插件CPS手速测试。CPS手速测试插件简介CPS手速测试插件是一款可以在线测试鼠标点击速度的检测工具，它可以是1/3/5/10/15/3..._测速度插件

VLAN以及三层交换机_核心交换机如何查询vlan-程序员宅基地

文章浏览阅读2k次，点赞2次，收藏7次。VLAN以及三层交换机1、VLAN概述与优势1.1vlan概述1.2vlan优势1.3VLAN的分类Trunk概述三层交换技术1、VLAN概述与优势1.1vlan概述VLAN(Virtual Local Area Network)，中文称为虚拟局城网。是一组逻辑上隔离的设备和用户。这些设备和用户不受物理位置限制，可根据部门成组等进行灵活划分，保障信息安全。同时隔绝广播信息，提升网络效能，防止广播风暴的产生。1.2vlan优势1. 限制广播域。广播域被限制在一个VLAN内，提高了网络处理能力。 2_核心交换机如何查询vlan

clearTimeout无效_cleartimeout不生效-程序员宅基地

文章浏览阅读7.3k次。如图所示clearTimeout接受id作为参数，所以检查一下是否传入的不是id因为默认情况下setTimeout方法是会返回id但有时候会返回一个setTimeout对象比如使用vsCode 开发的同学在使用setTimeout时会自动引入timer对象，此时setTimeout就会返回Timeout对象，此时只需要将对应的id传入即可或者直接将引用注掉..._cleartimeout不生效

安卓发送post请求_android post-程序员宅基地

文章浏览阅读1.6k次。在HTTP通信中使用最多的就是GET和POST了，GET请求可以获取静态页面，也可以把参数放在URL字符串的后面，传递给服务器。本文将使用标准Java接口HttpURLConnection，以一个实例演示如何使用POST方式向服务器提交数据，并将服务器的响应结果显示在Android客户端。在Android中，提供了标准Java接口HttpURLConnection和Apache接口HttpClient，为客户端HTTP编程提供了丰富的支持。将提交的数据写入Log\Log.php文件中。_android post

随便推点

HDU - 1272 小希的迷宫之独木桥（并查集的简单应用）-程序员宅基地

文章浏览阅读236次。小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)_hdu - 1272

RAD Studio 11.2详解其务实改进(Delphi & C++ Builder)-Alexandria-程序员宅基地

文章浏览阅读7.4k次，点赞5次，收藏11次。● 开发人员生产力：“搬运式的复用”是一个特性。使用Delphi和C++Builder使得开发机构交付订单和市场需求的速度提高了5倍有余。● 快速的“原生”应用程序：操作系统本机的原生编译器，赋能App应用应有的原生速度（没有任何臃肿）。● 数据库访问：Delphi最原始的关键设计之一，就是将数据库访问完全集成到RAD Studio之中。● 强大的C++库：数百个C++库，可以在C++Builder中使用，或者在RAD Studio中的Delphi下使用。_rad studio

shiro@RequiresPermission校验实现_requirespermissions 校验的是-程序员宅基地

文章浏览阅读864次。shiro-spring借助Spring AOP特性实现shiro的注解式校验引入shiro-spring依赖后一定要注入AuthorizationAttributeSourceAdvisor以便借助spring aop进行shiro注解校验 @Bean public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor(SecurityManager securityManager) ..._requirespermissions 校验的是