前端采坑-无法阻止表单提交

最新推荐文章于 2023-05-23 14:27:05 发布
最新推荐文章于 2023-05-23 14:27:05 发布
阅读量261 收藏
点赞数
分类专栏： 前端踩坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43169879/article/details/108695015
版权

当使用document.addEventListener添加表单提交事件，并通过return false;或者是this.preventDefault();阻止表单提交时发现无法阻止，经测试是addEventListener添加submit事件的bug，可以通过onsubmit绑定事件，或JQuery绑定submit事件，然后通过return false；或者是preventDefault（）；阻止表单提交。

遐光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端表单示例代码-简单的表单
07-27
可以使用 `@submit.prevent` 修饰符阻止默认的表单提交行为，然后在对应的事件处理器中处理数据： ```html <el-form @submit.prevent="submitForm"> ... </el-form> ``` 在 Vue 实例中定义 `submitForm` 方法...
Javascript的表单验证-提交表单
10-22
如果输入值的长度不在指定范围内，函数将更新帮助文本并返回`false`，阻止表单提交；否则，清除帮助文本并返回`true`。 `validate_ZipCode` 函数则验证邮政编码。它首先检查长度是否为5位，然后确认输入值是否全为...
form表单中的button按钮如何阻止提交
weixin_45386953的博客
03-27 1830
reset=表单复位 当button的type属性值为button时，仅做为一个普通的按钮，并不会提交该表单，此时你可以通过js脚本来提交，而form中不需要加onsubmit事件。在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。原文链接：https://www.js1331.com/jiaocheng?、button有个type属性，属性值可为button、submit、reset。
html submit 提交无效,[HTML] 表单提交与阻止表单提交
weixin_33724434的博客
06-03 1749
1. submit按钮按钮不在中不会提交表单。2. 按钮text相当于submit按钮，在中点击，会提交表单。3. 阻止submit默认事件submit按钮click事件中的e.preventDefault();会阻止submit按钮提交表单。document.querySelector('#button1').addEventListener('click',function(e){e.prev...
如何阻止表单的自动提交 - onclick - onsubmit - return true / false；
Muxiu
05-10 1159
目录表单的默认提交理解 onclick 和 onsubmit 参数的先后顺序补充： 表单的默认提交 一般，后台程序员与表单打交道的时间是最多的 最近学习Html 表单的提交验证，没想到运行时，都会给我自动提交，这真是难为我了，查了一下，原来是onclick/onsubmit方法的机制问题，我们看似正常传递了函数，用来验证提交是否有问题，如账号或密码是空的验证操作，就不提交表单了。 具体看一下html代码： <!-- 表单配置 --> <form action="/index/" met
js阻止表单提交的两种方法
thlzjfefe的博客
05-12 3094
下面直接看代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function checkLength(){ var name=document.get
addEventListener()前端通过监听事件防止重复提交
qq_42843557的博客
08-23 501
1.引入SessionStorage(通过session管理数据) 2.提交时在session中添加标记已提交 定义和用法 addEventListener() 方法用于向指定元素添加事件句柄。 提示：使用removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。 3.作用: 阻止提交事件成功后去做后退操作 注: 一定要在生命周期卸载阶段进行removeEventListener()操作,不然会导致此项目其他不相关的后退...
jquery实现表单验证并阻止非法提交
10-23
3. 阻止表单提交：在表单验证过程中，如果用户输入的数据不符合要求，我们通常希望阻止表单的提交，并给出相应的提示信息。通过在表单的onSubmit事件中加入JavaScript函数，我们可以实现这一点。 4. 使用onSubmit...
layui form表单提交之后重新加载数据表格的方法
10-16
本文将探讨在使用layui框架的情况下，如何在表单提交之后重新加载数据表格。 首先，让我们来分析一下使用的layui组件。Layui是一个前端UI框架，它提供了一套模块化的组件，方便开发者快速开发界面。其中，form模块...
阻止form表单提交，和提交时产生的问题总结
2³
08-04 7921
一、首先总结 阻止 form 表单提交的几种方法 <button> 提交时，type默认为submit，阻止提交将type改为button，即 type="button" <form action=""> <button type="submit"></button> </form> <input> 提交时，将type改为button，即 type="button" <form action=""> &
【前端】return false失灵，无法阻止提交表单
mudarn的博客
01-29 3828
function login(){ var logName=$("#logName").val(); var phone=$("#phone").val(); var protectNum=$("#protectNum").val(); if (logName == '' || logName == undefined || logName == null) ...
jquery easyui 中e.preventDefault()不生效
最新发布
weixin_43896145的博客
05-23 314
描述： 在弹框内，input输入框按下enter回车键，希望得到与点击search按钮一样的效果，结果按下enter之后，表单直接提交了。所以需要阻止这种默认行为。执行以上代码，发现并没有生效。
[HTML] 表单提交与阻止表单提交
a19860903的专栏
01-05 1万+
1. submit按钮 按钮不在中不会提交表单。 2. 按钮 text相当于submit按钮，在中点击，会提交表单。 3. 阻止submit默认事件 submit按钮click事件中的e.preventDefault();会阻止submit按钮提交表单。 document.querySelector('#button1').addEventListener('cli
JS阻止form表单提交
weixin_30423977的博客
01-22 523
当做登陆页面时，JS判断用户名密码为空时需要阻止form表单提交。 <script type="text/javascript"> var a = true; function validate(){ var username = document.getElementById("username").value; var ...
阻止表单提交的两种方式
qq_41369312的博客
01-31 1508
在前端想做表单验证，但是一点击提交，表单准能提交出去，加了return false也没用。所以在网上搜了下面的第二个方法，才阻止了表单的提交。 1.return false 这种方式大家应该都熟悉，我就不在说了。 2.使用preventDefault() 在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()。示例代码： $(".submit").on
html 阻止表单提交,利用JavaScript阻止表单提交的两种方法
weixin_39562752的博客
06-21 439
在JavaScript中，阻止表单默认提交行为的方法有两种，分别是：(1) return false示例代码Submitvar submitBtn = document.getElementById("submit");submitBtn.onclick = function (event) {alert("preventDefault!");return false;};(2) 使用preven...
前端——HTML或者JSP页面--执行完某事件后刷新页面，重置表单，清空数据
热门推荐
前方一片光明
02-24 1万+
在提交表单或者执行某个事件之后，如果需要重置表单（即清空表单里的数据） 可以执行下面代码来完成 方法1： self.location.href="userController.do?goAddOrUpdate";（双引号里面填写当前页面URL） 方法2：（去掉href） self.location="userController.do?goAddOrUpdate"; 方法3：（把上面的...
阻止form表单submit提交
东天里的冬天
06-13 1万+
近日在做项目的时候部分需要用到表单验证，原本想用插件进行验证的，结果发现只需要验证一个地方，就想自己用js写一下，过程中发现一个问题，在验证错误的时候需要点击submit时无法提交，这边就这个问题进行说明一下。 功能说明： 1.为空时，提交的时候会进行提示且无法提交。 2.名字长度不符时，失去焦点时会提示。 3.会检测后台数据库，看相册命名是否重复。 4.以上提示在提交表单时如果不符
前端页面表单提交到后台
03-30
前端页面表单提交到后台的步骤如下： 1. 在前端页面中创建一个表单，指定 action 属性和 method 属性，分别指定提交的地址和提交方式（POST 或 GET）。 2. 在表单中添加输入控件，如文本输入框、下拉框等。 3. 给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值