`
wangyanlong0107
  • 浏览: 495092 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

【转】有关onsubmit return false 阻止form表单提交:js

 
阅读更多

onsubmit=return false阻止form表单提交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="a.JSP" mce_href="a.JSP" 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>
onclick="javascript:select(this);return false;" select一般是个与页面正常提交路径不一样的改变提交路径的函数。然后js提交。组织原来的提交动作。

 

分享到:
评论

相关推荐

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

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

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

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

    JavaScript阻止表单提交方法(附代码)

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

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

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

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

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

    js提交表单及js表单验证

    ### JS提交表单及JS表单验证 在Web开发中,JavaScript经常被用来增强用户体验,其中一个重要的应用领域就是表单验证。通过JavaScript进行前端验证,可以及时反馈用户输入错误,提高交互效率。本文将详细解释如何...

    浅析onsubmit校验表单时利用ajax的return false无效问题

    代码如下:/** * 表单提交校验 **/function onSubmit(){ if($(‘#name’).val().length&lt;2){ alert&#40;“名称请不少于两个汉字”&#41;; return false; } var t = new Date().getTime(); $.ajax({ type: ...

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

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

    js中return false(阻止)的用法

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

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

    在form表单上添加一个提交事件调用验证数据方法 &lt;form name="listform" action="resume-doAdd" method="post" onsubmit="return Validator.Validate(this,3);"&gt; 请输入正确的手机号!" requiremsg="移动电话不能为...

    js表单验证大全,js提交表单

    - **return false**: 在验证函数中返回`false`也可达到阻止提交的效果。 4. **表单验证策略** - **客户端验证**: 使用JavaScript在用户端进行,速度快但可被绕过。 - **服务器端验证**: 必不可少的安全措施,...

    js 提交form表单和设置form表单请求路径的实现方法

    本文将详细介绍如何使用JavaScript来提交一个form表单和设置表单请求路径的方法,这些知识点是前端开发人员必备的基础技能之一。 首先,我们需要了解form表单的基本结构和属性。表单通常是由一系列输入元素(如...

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

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

    表单验证js 提交前验证

    2. **初始化验证**:在表单的`onsubmit`事件中调用验证函数,如`return validateForm(formElement)`。返回值为`false`会阻止表单提交。 3. **配置验证规则**:每个表单字段可能需要设置不同的验证规则,可以通过...

    vue3-form-usage:使用vue3的表单用法

    `onSubmit`函数在提交时调用,并通过`.prevent`修饰符阻止了默认的表单提交行为。 6. **表单验证**: Vue3可以通过引入第三方库,如Vuelidate或使用自定义的验证逻辑来实现。使用`ref`和`watch`可以轻松实现对表单...

    JS定义网页表单提交(submit)的方法

    本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 [removed] function saveInfo() { localStorage...

    Form表单的action和onSubmit示例介绍

    Form表单具有多个属性和事件,其中action属性和onSubmit事件是两个非常重要的组成部分。 action属性是form表单的一个基本属性,它用来指定当表单提交后,所收集的信息将被发送到的服务器上的URL。在HTML5标准中,...

    php防止form重复提交的方法

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

Global site tag (gtag.js) - Google Analytics