`
sangei
  • 浏览: 337368 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

(转)表单的onsubmit,onclick事件和javascript的return

阅读更多

今天做一个表单提交验证的工作,做到其中一段时,我想提交表单时,先验证是否填写了姓名,如果没填写,右侧显示出提示信息,并取消提交,如果已填写,则正常提交。

初步想法,想自己写个 js 函数,在提交按钮处用 onclick 事件,判断填写了则用js提交表单,没填写则蹦出提示信息,但基本上实现了半天,达不到我想要的结果,最后才发现原来有 onsubmit 这个属性,它写在 form 标签里。

onclick 和 onsubmit 的区别:

  • onSubmit 是表单上(也只能是表单)用的,提交表单前会触发。
  • onClick 是按钮等控件上用的,用来触发点击事件。

用作数据验证的时候,可以选择在 submit 按钮上的 onclick 中验证,可以在 onsubmit 中验证。但是从事件触发顺序上来说,onclick更早。顺序是:

用户点击按钮 -> onclick -> 如果onclick返回有效或未处理 onclick 则提交表单 -> onsubmit -> 如果 onsubmit 未处理或返回true,则提交,否则取消提交。

onsubmit 中返回 false 会引起取消表单提交,onclick 中返回 false 则会引起此次点击操作被判断为无效,则也就不会引起表单提交。

1 <a href="somewhere.html" onClick="doSomething()">

在上面的例子中,doSomething()会首先执行,然后浏览器会打开链接(默认动作)。

事件处理程序可以返回一个布尔值(ture或者false),false的含义就是“不要进行默认动作”。

1 <a href="somewhere.html" onClick="doSomething(); return false">

这个链接就不会跟着执行了。这个函数执行之后程序返回false,告诉浏览器不要执行默认动作。

有时候有必要让函数决定什么时候该执行什么时候不该执行默认动作。所以我们可以把例子改成:

1 <a href="somewhere.html" onClick="return doSomething()">
2 function doSomething()
3 {
4     return confirm('Do you really want to follow this link?')
5 }

这就是(非常简单的)用户交互。用户会被问一个问题,如果回答是肯定的那么函数返回 true,如果取消了那么久返回一个 false。这个返回值会被事件处理程序捕获,然后转给事件本身。如果是 flase 那么默认动作就不会被执行——链接不会进入。

然而,不是所有的默认动作都能被阻止。比如 unload 事件就不行。假设用户关闭浏览器窗口——触发了 unload 事件。如果你能阻止关闭窗口,那么窗口会违背用户的意愿而一直打开着么? 用微软的 beforeunload 属性来阻止 unload。

返回 false 来阻止默认动作是所有浏览器都支持的这是事件处理程序的基本组成。如今的事件处理程序模型还添加了一些新的方法来阻止默认动作:

  • W3C 给事件添加了 preventDefalut() 方法。如果你引用了这个方法那么默认动作就会被阻止。
  • 微软给事件添加了 returnValue 属性。如果你设置他的值为 false 那么默认动作也会被阻止。

但是用不着这些个,简单的返回 false 就够了。

分享到:
评论

相关推荐

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

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

    用JavaScript的事件句柄功能及表单元素创建交互式电话号码簿.pdf

    在创建交互式电话号码簿时,JavaScript的事件句柄可以用于处理用户输入,验证电话号码格式,或者在用户提交表单时进行数据验证和处理。例如,`onSubmit`事件可以用于在表单提交前检查所有输入字段,确保电话号码符合...

    javaScript常用事件

    JavaScript是Web开发中不可或缺的一部分,尤其在处理用户交互时,事件扮演着至关重要的角色。本文将详细介绍...通过理解并熟练运用这些JavaScript事件和对象方法,开发者可以创建出更加互动和响应式的网页应用。

    javascript 触发事件列表

    #### 十二、表单事件(onreset, onsubmit) - **onreset**:当表单重置时触发。 - **onsubmit**:当表单提交前触发。 这些事件常用于验证表单数据或阻止表单的默认提交行为。 **示例:** ```html &lt;form onsubmit=...

    巧用JavaScript创建智能表单效果

    ### 巧用JavaScript创建智能表单效果 ...以上方法展示了如何使用JavaScript创建智能表单效果以及如何处理字符串和传递参数的基本概念。通过这些技术的应用,可以极大地提高Web应用程序的功能性和用户体验。

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

    2. **JavaScript事件处理**:通过为`&lt;input type="submit"&gt;`或`&lt;button&gt;`添加`onclick`事件处理函数,可以在提交前进行验证。如果验证失败,可以使用`return false;`阻止表单提交。对于`&lt;button&gt;`,因为其不具有自动...

    Javascript中的return作用及javascript return关键字用法详解

    总结来说,JavaScript中的return语句不仅用于返回函数的值,还可以控制函数执行流程,特别是在事件处理和表单提交场景下,return语句的使用直接影响程序的运行结果。理解并熟练运用return语句,对于进行有效和符合...

    jsp表单验证汇总

    ### jsp表单验证汇总知识点解析 #### 一、JS验证Radio按钮是否被选择 ...通过以上详细介绍,我们可以看到这些常见的表单验证技术是如何帮助开发者提高表单填写的准确性和完整性,从而提升用户体验和数据质量。

    [js]javascript事件集合(包有触发事件).pdf

    `onsubmit`事件在表单提交时触发,而`onreset`事件在表单被重置时触发。它们常用于表单验证。 ```html &lt;form onsubmit="return false;"&gt; &lt;!-- 阻止表单默认提交行为 --&gt; ``` #### 11. ondrag, ondragend, ...

    JavaScript中return false的用法

    首先,需要明确的是,`return false`通常出现在事件处理函数中,比如` onclick`、`onsubmit`等事件的处理函数里。`return false`的作用主要是取消事件的默认动作,或者阻止事件进一步传播。 以最常见的` onclick`...

    JavaScript表单验证大全

    这里通过`onsubmit`事件触发`test`函数,当输入的字符长度超过50时,弹出提示并阻止表单提交。 ##### 2. 仅限中文输入 有时候我们需要限制用户只能输入中文字符,可以通过正则表达式实现这一功能: ```javascript...

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

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

    Javascript 验证表单大全

    根据给定文件的信息,我们可以总结出以下JavaScript表单验证的相关知识点: ### JavaScript 验证表单大全 #### 1. 文本长度限制 在表单提交时检查输入文本的长度是否超过50个字符。 ```javascript function test...

    用JavaScript创建交互式Web页面 (1).pdf

    本文简要介绍了JavaScript中的事件和事件处理程序,并通过实例说明了在HTML设计中应用JavaScript实现Web页面的交互性。 JavaScript是一种易于使用的对象描述语言,是为了创建真正的联机应用程序而设计的。在客户端...

    javascript表单验证大全

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在客户端运行,为用户提供实时交互体验。在HTML表单中,JavaScript常用于实现前端验证,即在用户提交数据之前检查其输入的有效性,以减少无效数据的提交和...

    javascript表单事件处理方法详解

    总之,JavaScript的表单事件处理为网页提供了一种强大的方式来响应用户的操作,通过合理的事件绑定和处理,可以实现更高效、更友好的用户界面。了解并熟练掌握这些事件处理方法,对于任何Web开发者来说都至关重要。

    javaScript表单验证

    ### JavaScript表单验证知识点详解 #### 一、概述 JavaScript 表单验证是前端开发中的一个常见需求,它能够帮助开发者在用户提交表单前进行数据校验,从而避免不必要的服务器请求并提升用户体验。本文将详细介绍几...

    javascript 按回车键相应按钮提交事件.docx

    通常,这种验证会通过表单的`onsubmit`事件或者按钮的`onclick`事件来实现。然而,在实际应用中可能会遇到这样一个需求:当用户完成表单填写后,希望可以通过直接按回车键来触发按钮的点击事件,从而执行表单验证并...

    JavaScript基础应用(讲义).doc

    #### 四、表单对象的常用事件和属性 - **表单对象**: 表单是 Web 页面中最常见的交互元素之一,用于收集用户数据。 - **常用事件**: - **onSubmit**: 表单提交前触发。 - **onReset**: 表单重置时触发。 - **示例...

Global site tag (gtag.js) - Google Analytics