`

onsubmit=return false阻止form表单提交javascript_1

 
阅读更多

摘自：http://jackaudrey.blog.163.com/blog/static/131421788201058115358285/

onsubmit=return false阻止form表单提交javascript_1   

2010-06-08 23:53:58 |  分类： JavaScript | 字号   订阅

return false 阻止表单提交不起今天这个问题困扰了我很久，在网上找了很多资料，基本上关于onsubmit=return false有以下几点要注意的地方：

1. return 的返回值问题 ， 函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型 false，可以返回一个函数的值,并且跳出这个函数；只要遇到return语句，程序就在那一行代码停止执行，执行控制将立刻返回到调用该程序的代码 处。

 function chkinput(form)
 {
   if(form.title.value=="")
    {
      alert("请输入文章标题!");
   form.title.select();
   return false;              //注意不能写成 return(false); 2009.12.15
    } 
 
   if(form.content.value=="")
    {
      alert("文章正文不能为空@！!");
   form.content.select();
   return false;
    }
 
    return true;
 }

2.form的onsubmit属性的触发问题， onsubmit 事件什么时候触发？onsubmit 事件会在表单中的确认按钮被点击时发生。不触发的原因有一般如下：

A. onsubmit属性的触发时机是在form用input:submit这样的button提交时才会触发，否则不会触发。如果是用一个普通input:button，则在onclick属性 中指定一个javascript函数，在这个函数里面再执行form的submit()函数，而不是onsubmit属性。

B. 先看一段代码：

 <
form
 action
="
index.jsp
"
 method
="
post
"
 onsubmit
="
submitTest();
">
 
 <
INPUT
 value
="
www
">
 
 <
input
 type
="
submit
"
 value
="
submit
">
 
</
form>


<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
 function submitTest() { 
 //
 一些逻辑判断return
 false
;
 
 }
 
/
/-->
</
SCRIPT>
点击submit按钮该表单并未提交。因为有一处应该改为（红色字体） 
<
form
 action
="
index.jsp
"
 method
="
post
"

 onsubmit
="
return

 submitTest();

">

原来onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true；

和Java一样，在该方法体中你可以写任意多个语句，包括内置函数和自定义函数。

在这里submitTest()虽然返回false，但我们只执行了此函数，没有对其结果进行任何处理。

而onsubmit =" return submitTest()利用到了它的返回值，达到了预期效果。

3.事件处理函数返回false的问题 ，在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.

 

例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.   
Return False 就相当于终止符，Return True 就相当于执行符。   
在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的   
onclick时间（如果你指定的话）以外还要触发一个默认事件就是执行页面的跳转。所以如果   
你想取消对象的默认动作就可以return false。return false应用比较多的场合有：   

<body>   
1， <a href="/" mce_href="/" onclick=’test();’>超级链接 </a>   
2， <input type="button" onclick=’test()’ value="提交">   
3， <form name="form1" onsubmIT="return test();">   
内容   
<input type="submIT" value="提交">   
</form>   
</body>

<input type="submit" onclick="submitAction(); return false;" />   
submitAction 方法里面有提交表单的动作。如果不加 return false，

在执行完 submitAction 之后，submit 按钮还会继续执行它的默认事件，就会再次提交表单。这可能就是很多错误的根源。   
的确，return false的含义不是阻止事件继续向顶层元素传播，而是阻止浏览器对事件的默认处理。你可以这样试验：
首先将所有的js脚本注释掉，在IE浏览器中尝试拖动一下图片，你会发现鼠标会成为禁止操作的样式，图片是被禁止拖动的，它是浏览器针对mousemove事件所提供的默认行为。

return false就是为了去掉这种行为，否则就会出现你描述的中断事件连续执行。   
另外，和return false等效的语句为：

window.event.returnValue = false，

你可以把return false替换为此语句并进行验证。   
最后说明一下，此种方式只适用于IE浏览器。

在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 
onclick时间（如果你指定的话）以外还要触发一个默认事件就是执行页面的跳转。所以如果 
你想取消对象的默认动作就可以return false。return false应用比较多的场合有：

<form name="form1"  onsubmit="return youfunction();">...... </form> 
<a href="www.***.com" onclick="...;return false;">dddd </a>
分享到：
| 防止表单自动提交，以及submit和button提交 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    onsubmit阻止form表单提交与onclick的相关操作

    总结，`onsubmit`事件和`return false`是JavaScript中控制表单提交的关键机制，它们允许开发者在表单提交前进行验证、交互等操作，提高了用户体验和数据安全性。正确理解和使用这两个特性对于后台编程人员至关重要，...

    防止Layui form表单重复提交的实现方法

    首先，在HTML表单中，为了避免在提交时页面刷新导致的重复提交，可以在&lt;form&gt;标签中使用onsubmit="return false;"属性。这个属性的作用是在表单提交时返回false，阻止浏览器执行默认的提交行为，即刷新页面。但仅仅...

    【JavaScript源代码】HTML form表单提交方法案例详解.docx

    当表单被提交时，`onsubmit`函数会被调用，如果返回`true`，则表单会继续提交，如果返回`false`，则阻止提交。 在以上案例中，`check`函数负责验证用户输入的用户ID和密码。如果任何一项为空，它会弹出警告并聚焦到...

    JavaScript event（事件） 字符串长度控制及Form表单提交控制

    在本主题中，我们将深入探讨JavaScript中的事件、字符串长度控制以及如何对Form表单进行提交控制。 首先，我们来讨论JavaScript事件。事件是用户与网页进行交互时产生的动作，比如点击按钮、滚动页面或填写表单。...

    JavaScript阻止表单提交方法（附代码）

    JavaScript阻止表单提交是通过事件处理和返回值控制实现的，常用的方法包括使用`event.preventDefault()`或在`onsubmit`中返回`false`。同时，结合JavaScript的表单元素访问和值验证功能，可以实现复杂的表单数据...

    js中return false(阻止)的用法.docx

    这时可以在表单的`onsubmit`事件中使用`return false`来阻止表单的默认提交行为。 ```javascript function chkInput(form) { if (form.title.value === "") { alert("请输入文章标题!"); form.title.select(); ...

    JS验证页面form表单数据，齐全

    在form表单上添加一个提交事件调用验证数据方法 &lt;form name="listform" action="resume-doAdd" method="post" onsubmit="return Validator.Validate(this,3);"&gt; &lt;input type="text" id="linkPhone" name=...

    js提交表单及js表单验证

    本文将详细解释如何使用JavaScript进行表单提交以及表单验证，并通过具体的示例代码来展示各种常见验证方法。 #### 一、基本概念 表单验证是指在用户提交表单前对用户输入的数据进行检查的过程，以确保数据的有效...

    JSP避免Form重复提交的三种方案

    在Web开发中，尤其是使用JavaServer Pages (JSP)时，Form表单的重复提交问题是一个常见的挑战。这可能导致数据不一致性和服务器资源的浪费。本文将探讨三种防止JSP表单重复提交的方法。 首先，我们可以使用...

    js中return false(阻止)的用法

    总结来说，`return false`在JavaScript中是一个用于取消事件默认行为的快捷方式，尤其是在处理表单提交和其他需要阻止默认动作的事件时非常有用。它通常出现在表单的`onsubmit`事件处理程序中，或者直接作为事件监听...

    表单与javascript

    &lt;FORM name="form1" onSubmit="return validateform()" method="post" action="button.html" &gt; 名字： &lt;INPUT TYPE="text" id="txtName" NAME="txtName" size=10 onBlur="validateName();"&gt; 密码： &lt;INPUT TYPE=...

    form_login 表单验证 客户端验证

    &lt;form id="loginForm" onsubmit="return validateForm()"&gt; &lt;input type="text" id="username" placeholder="用户名"&gt; &lt;input type="password" id="password" placeholder="密码"&gt; &lt;button type="submit"&gt;登录 &lt;/...

    在客户端限制表单重复提交有两种方法

    在客户端限制表单重复提交是Web开发中一个重要的实践，主要目的是防止用户意外或恶意地多次提交同一份数据，导致数据库出现重复记录或者系统逻辑出错。本文将详细阐述两种客户端限制表单重复提交的方法，并结合...

    js验证表单大全,用JS控制表单提交 ,javascript提交表单

    根据给定的文件标题、描述、标签以及部分内容，本文将深入解析JavaScript在表单验证中的应用，涵盖多种常见且实用的验证方法。JavaScript是前端开发中不可或缺的一部分，它能够实现动态网页效果，尤其是在用户交互...

    php防止form重复提交的方法

    另一种方式是通过`onSubmit`事件，一旦表单被提交，阻止后续的提交尝试，例如： ```html &lt;form name="the_form" method="post" action="" onSubmit="return submitOnce(this)"&gt; function submitOnce(form) { ...

    JSP避免Form重复提交的三种方案.docx

    这种方法通过JavaScript在客户端阻止表单的多次提交。首先，定义一个全局变量`checkSubmitFlg`，初始值设为`false`。当用户尝试提交表单时，`checkSubmit()`函数检查`checkSubmitFlg`的状态，如果已经为`true`，则...

    JavaScript禁止用户多次提交的两种方法_.docx

    在表单提交事件处理函数中，我们首先阻止表单的默认提交行为，然后禁用提交按钮，最后设置一个定时器模拟服务器处理请求的时间，一段时间后才真正提交表单。这样，即使用户频繁点击，也不会触发额外的提交请求。以下...

    Javascript 提交时的消息或提示窗口

    在这个例子中，`validateForm()`是一个JavaScript函数，它将在表单提交前执行。如果该函数返回`true`，表单将正常提交；如果返回`false`，则阻止提交。 接下来，我们可以在这个函数内部添加提示消息的逻辑。...

Magicbox
Global site tag (gtag.js) - Google Analytics