onsubmit阻止表单提交的一种方式

最新推荐文章于 2022-05-10 14:22:47 发布
原创 最新推荐文章于 2022-05-10 14:22:47 发布 · 8.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动开发 #前端 #表单

本文介绍了如何使用JavaScript来控制HTML表单的提交行为。通过在表单的onsubmit属性中调用一个返回布尔值的函数，可以实现在特定条件下阻止表单提交。此方法对于前端开发人员特别有用。

最近做移动开发，一下从后台转移到前端了，之前写了一年的java代码，现在天天搞jQ  css html ,肯定有点不习惯，不过现在已经适应了，写页面还是挺好玩的。

言归正传，今天遇到的就是怎么阻止表单提交，比如当提交的某一条件不能得到满足的时候，就不能进行提交操作，看红色字体进行分析，根据条件我们得到的结果只有两种：1.可以提交   2.不可以提交（貌似废话）。  作为一名开发来说，你首先会想到boolean.如果返回true：执行提交操作；返回false:阻止提交。 问题分析好了。

 

解决方法：

在你的表单中：

<form name="myform" method="" action="#" onsubmit="return submit()">
</form>
js代码中:
function submit（）
{
根据自己的业务去进行判断，返回true or  false
}

 

 

onsubmit阻止form表单提交与onclick的相关操作
09-05
return false会阻止表单提交，基本上关于onsubmit=return false有以下几点要注意的地方，学习后台编程的朋友一定要知道。
JavaScript阻止表单提交方法（附代码）
10-19
本文将详细介绍两种阻止表单提交的方法，并解释`onSubmit`和`check()`的区别。 ### 第一种方法：利用event的阻止默认事件机制 这种方法通过在事件处理函数中使用`event.preventDefault()`来阻止表单的默认提交行为...
onsubmit阻止表单提交
ying217的博客
05-06 324
onsubmit阻止表单提交 "Content-Type" content="text/html; charset=gb2312" /> "javascript"> //---> function checksubmit() { if (document.form1.myname.value=="") { alert("请输入开始数值！");
jQuery中验证表单提交方式及序列化表单内容的实现
12-02
// 阻止表单提交 } return $('#addForm').form('validate'); // 判断required项是否全部有值 }, success: function(data) { var obj = jQuery.parseJSON(data); // 将返回的JSON转化为所需对象 if (!obj....
表单提交前触发函数返回true表单才会提交
09-04
这个例子展示了如何利用`onsubmit`事件和自定义函数来实现对表单提交的控制，尤其是在支付场景中，确保用户选择了正确的支付方式。这样的实践在实际开发中非常常见，可以避免因为用户误操作或输入错误导致的问题，...
JS去掉字符串前后空格、阻止表单提交的实现代码
10-19
例如，在上述内容中，如果文本框输入为空，则调用alert函数显示提示信息，并通过返回false阻止表单提交。 - 使用jQuery：可以使用类似的方法，通过绑定onsubmit事件来调用一个处理函数。在该函数中同样进行验证，...
OnSubmit阻止表单提交
qq_19346707的博客
07-18 469
1.form的两个事件　　submit，提交表单，如果直接调用该函数，则直接提交表单 　　onSubmit，提交按钮点击时先触发，然后触发submit事件。如果不加控制的话，默认返回true，因此表单总能提交。 　　2. JS的校验 　　通过在JS中用document.myform.name.value,来得到用户的每一个输入 ，进行校验，当完全通过时，返回TRUE，反之返回false。
JS阻止表单提交
ALL TECHNOLOGIES ARE CLOUDS
07-25 190
阻止表单提交 方法一： &lt;input type=submit name=t_button onclick= "aaa();return false"&gt; 方法二： &lt;input type=submit name=t_button onclick= "return aaa()"&gt; function aaa(){     ... return false; }...
onsubmit校验表单并阻止提交``
weixin_37671232的博客
12-30 370
** onsubmit校验表单并阻止提交`` ** 刚刚接触 表单和JAVASCRIP 关于onsubmit的 用法还不是十分了解 请多指教 最佳答案 本回答由提问者推荐 头像 匿名用户1级 2009-08-15 回答 onsubmit表示表单提交时验证的事件，它是在表单中的确认按钮被点击时出发的，一般是js函数。 当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。注意，当调用方法Form.submit() 时，该处理器函数不会被调用。 如果 onsubmit 句柄返回 f
如何阻止表单的自动提交 - onclick - onsubmit - return true / false；
Muxiu
05-10 1367
目录表单的默认提交理解 onclick 和 onsubmit 参数的先后顺序补充： 表单的默认提交 一般，后台程序员与表单打交道的时间是最多的 最近学习Html 表单的提交验证，没想到运行时，都会给我自动提交，这真是难为我了，查了一下，原来是onclick/onsubmit方法的机制问题，我们看似正常传递了函数，用来验证提交是否有问题，如账号或密码是空的验证操作，就不提交表单了。 具体看一下html代码： <!-- 表单配置 --> <form action="/index/" met
JS中onsubmit禁止提交表单的三种方式
qq_30359369的博客
08-14 1888
JS中onsubmit禁止提交表单的三种方式 前面我在博客中写过onblur实现失焦调用函数的三种方式, onsubmit也几乎一模一样, 不过昨天我在写一个表单提交页面,判断某些必填项未填写则禁止提交, 我们知道onsubmit是否提交取决于它的值,true则提交,false则禁止提交; 当在调用判断函数时返回值为false却也提交了…于是我查了资料,并把JS触发事件研究了一下,总结如下: 第一...
阻止form表单默认提交
weijia_kmy的博客
04-28 3889
1、return false; $("#btn").click(function(){ // todo .... return false; }) 2、type = “button” &lt;form&gt; ...... &lt;input type="button" value="提交"&gt; &lt;!-- 或者 --&gt; ..
使用onsubmit return false 阻止form表单提交的方法介绍
weixin_30507481的博客
10-29 227
使用 onsubmit=return false 阻止表单提交，要注意以下几点： 1，return 的返回值问题，函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型false，可以返回一个函数的值,并且跳出这个函数；只要遇到return语句，程序就在那一行代码停止执行，执行控制将立刻返回到调用该程序的代码处。 ...
php中怎么用onsubmit防止,form onsubmit 里return阻止表单提交原理
weixin_36070998的博客
03-27 235
众所周知，在表单中加上οnsubmit="return false;"可以阻止表单提交。或者我们通过 onsubmit = "return mysubmit()"但是你知道为啥它能阻止表单提交吗？下面是简单的一小段代码：function submitTest() {// 一些逻辑判断return false;}大家判断像上面的写法，点击submit按钮该表单是否提交？若答案为是，就不用往下看了。若...
php onsubmit方法,onsubmit禁止form表单提交解决办法
weixin_33835122的博客
03-18 294
为什么要禁止表单提交呢？主要是更好的用户行为。比如刚填完一个input的内容，不小心点到了回车键，如果没有JS/判断那么就会被提交，辛辛苦苦忙了一半天又得重新填写。如何解决？1、return false会阻止表单提交，代码如下：2、JS/JQ防止表单提交，代码如下：functionchkinput(form){if(form.title.value==""){alert("标题不能为空!");f...
js阻止form表单提交
热门推荐
a1062656171的博客
07-15 1万+
function validate(){         alert("请输入验证码！"); //则弹出请输入验证码           return false;     }     else if(inputCode != code ) {         alert("验证码输入错误！@_@"); //则弹出验证码输入错误           createCode();//刷新
阻止表单提交默认事件
最新发布
11-28
<think> 我们正在处理用户的问题：“我想查找阻止表单提交默认事件的方法 请问如何阻止表单提交默认事件”。根据提供的引用内容，我们可以总结出以下几种方法： 1. 将按钮类型从`submit`改为`button`： - 对于`<input>`标签，将其`type`属性设置为`"button"`而不是`"submit"`。 - 对于`<button>`标签，默认类型是`submit`，所以需要显式设置`type="button"`。 2. 使用`preventDefault()`方法： - 在表单的提交事件处理函数中，调用`event.preventDefault()`来阻止默认提交行为。 3. 在`onclick`事件处理函数中返回`false`： - 在提交按钮的`onclick`事件中，执行`return false`可以阻止表单提交。 4. 使用`onsubmit`事件处理函数返回`false`： - 在表单的`onsubmit`事件中，执行`return false`也可以阻止表单提交。 下面我们将详细说明这些方法，并给出示例代码。 ### 方法1：修改按钮类型 将按钮类型改为`button`后，点击按钮不会触发表单的提交事件。 示例： ```html <form action=""> <!-- 使用input标签 --> <input type="button" value="提交" onclick="submitForm()" /> <!-- 或者使用button标签并指定类型 --> <button type="button" onclick="submitForm()">提交</button> </form> ``` ### 方法2：使用`preventDefault()` 在表单的提交事件处理函数中，我们可以通过事件对象调用`preventDefault()`方法来阻止默认提交。 示例（使用内联事件处理）： ```html <form action=""> <input type="submit" value="提交" onclick="handleClick(event)" /> </form> <script> function handleClick(event) { event.preventDefault(); // 阻止默认提交 // 这里可以写自定义的处理逻辑，比如使用AJAX提交 } </script> ``` 或者，我们可以监听表单的`submit`事件： ```html <form action="" id="myForm"> <input type="submit" value="提交" /> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单提交 // 自定义逻辑 }); </script> ``` ### 方法3：在`onclick`中返回`false` 在按钮的`onclick`事件处理函数中返回`false`，可以阻止表单提交。 示例： ```html <form action=""> <input type="submit" value="提交" onclick="return false;" /> <!-- 或者调用一个返回false的函数 --> <input type="submit" value="提交" onclick="return handleClick();" /> </form> <script> function handleClick() { // 自定义逻辑 return false; // 返回false阻止表单提交 } </script> ``` ### 方法4：在`onsubmit`中返回`false` 在表单的`onsubmit`事件处理函数中返回`false`，同样可以阻止表单提交。 示例： ```html <form action="" onsubmit="return handleSubmit();"> <input type="submit" value="提交" /> </form> <script> function handleSubmit() { // 自定义逻辑 return false; // 返回false阻止表单提交 } </script> ``` 或者，也可以直接在`onsubmit`属性中写返回`false`： ```html <form action="" onsubmit="return false;"> <input type="submit" value="提交" /> </form> ``` ### 注意事项 - 使用`return false`的方式（在`onclick`或`onsubmit`中）要求事件处理函数返回`false`，并且需要将`return`关键字写在事件属性中（如`onclick="return func()"`，而不仅仅是`onclick="func()"`）。 - 使用`preventDefault()`是更符合现代事件处理的方式，它不会阻止事件冒泡，而`return false`还会阻止事件冒泡（在jQuery中，`return false`同时会阻止默认行为和冒泡，但在原生JS中，`return false`在`onclick`和`onsubmit`中只阻止默认行为，不阻止冒泡？实际上，在原生事件处理程序中，`return false`的效果等同于`event.preventDefault()`加上`event.stopPropagation()`？并不是，在原生事件处理中，使用`onclick`属性返回`false`只会阻止默认行为，不会阻止冒泡。但是，在jQuery的事件处理中，`return false`会同时阻止默认行为和冒泡。所以这里需要注意区分。）。 ### 总结 阻止表单的默认提交事件有多种方法，选择哪种方法取决于具体情况： - 如果按钮不需要触发表单提交，可以直接修改按钮类型为`button`。 - 如果需要使用JavaScript控制提交逻辑（如AJAX提交），推荐使用`preventDefault()`或返回`false`（在`onsubmit`中）的方式。 请根据你的实际需求选择合适的方法。 §§相关问题§§ 1. 在表单提交事件中，`event.preventDefault()`和`return false`有什么区别？ 2. 如何通过jQuery来阻止表单提交？ 3. 使用AJAX提交表单数据时，需要注意哪些问题？ 4. 表单提交时，如何验证表单数据并阻止不合法的提交？ </think> 要阻止表单的默认提交事件（即点击提交按钮时页面自动刷新或跳转），以下是五种常用方法及示例： ### 一、修改按钮类型（推荐） 将 `<input>` 或 `<button>` 的类型从 `submit` 改为 `button`： ```html <form action=""> <!-- 方法1: input标签 --> <input type="button" value="提交" onclick="handleSubmit()"> <!-- 方法2: button标签 --> <button type="button" onclick="handleSubmit()">提交</button> </form> <script> function handleSubmit() { // 这里写自定义提交逻辑（如AJAX） console.log("表单已阻止默认提交"); } </script> ``` ### 二、使用 `preventDefault()`（事件对象） 在事件处理函数中调用 `event.preventDefault()`： ```html <form action=""> <input type="submit" value="提交" onclick="handleClick(event)"> </form> <script> function handleClick(event) { event.preventDefault(); // 关键代码 // 自定义逻辑 } </script> ``` ### 三、`onsubmit` 事件返回 `false` 在表单的 `onsubmit` 事件中返回 `false`： ```html <form action="" onsubmit="return handleSubmit()"> <input type="submit" value="提交"> </form> <script> function handleSubmit() { // 自定义逻辑... return false; // 阻止提交 } </script> ``` ### 四、`onclick` 事件返回 `false` 在按钮的 `onclick` 事件中返回 `false`： ```html <form action=""> <input type="submit" value="提交" onclick="return false"> <!-- 或调用函数 --> <input type="submit" value="提交" onclick="return handleClick()"> </form> <script> function handleClick() { // 自定义逻辑... return false; // 阻止提交 } </script> ``` ### 五、结合 AJAX 提交 完全接管提交过程（需配合事件监听）： ```html <form id="myForm"> <input type="submit" value="提交"> </form> <script> document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止默认提交 // 使用AJAX发送数据 fetch("/api/submit", { method: "POST", body: new FormData(this) }).then(response => { console.log("AJAX提交成功"); }); }); </script> ``` ### 方法对比 | **方法** | **优点** | **适用场景** | |------------------------|-----------------------------|--------------------------| | 修改按钮类型 | 简单直接，无需JS | 简单交互场景 | | `preventDefault()` | 符合现代事件处理标准 | 需要精细控制事件的场景 | | `onsubmit` 返回 `false`| 兼容性好 | 传统表单验证 | | AJAX 提交 | 无刷新提交，体验最佳 | 现代Web应用 | > **关键点**：所有方法的核心都是**中断浏览器默认的提交流程**。对于需要异步提交的场景，推荐使用 `preventDefault()` + AJAX 的组合方案[^1][^2][^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值