`
sangei
  • 浏览: 327769 次
  • 性别: 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 就够了。

分享到:
评论

相关推荐

    submit表单提交,onsubmit验证拦截

    submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求

    表单元素的submit()方法和onsubmit事件应用概述

    表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。1、表单元素中出现了name=”submit”的元素这种情况下elemForm.submit();将不会触发表单提交...

    JavaScript事件使用示例

    onload事件 ,onclick事件,onblur失去焦点事件,onsubmit表单提交事件的使用示例

    javaScript常用事件

    常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit ...

    jsp表单验证汇总

    js验证表单大全js验证radio是否选择 &lt;script language="javascript"&gt;function checkform(obj){for(i=0;i;i++) if(obj.oo[i].checked==true) return true; alert("请选择")return false; }&lt;/script&gt;&lt;form id="form1...

    JavaScript详解(第2版)

     13.4.2 鼠标事件和图像——翻转   13.4.3 通过鼠标事件创建幻灯片   13.5 处理链接事件   13.6 处理表单事件   13.6.1 按钮   13.6.2 表单和按钮中的this关键字   13.6.3 表单和onClick事件...

    浅析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源代码】JavaScript实现异步获取表单数据.docx

     本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下 在上一篇文章中讲到了使用JavaScript异步提交表单中的数据,那么今天我们就讲讲利用JavaScript异步获取表单中的数据;...

    表单与javascript

    表单与javascript的课件,ppt中有源码,可以直接复制过来运行,是很好的教学资源: 表单元素事件: 文本域事件 按钮事件 复选框事件 单选按钮事件 表单有效性验证: &lt;HTML&gt; &lt;HEAD&gt;&lt;TITLE&gt;表单对象的事件 ...

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

    return false会阻止表单提交,基本上关于onsubmit=return false有以下几点要注意的地方,学习后台编程的朋友一定要知道。

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    JavaScript语言参考手册

    另外,本章还包括了关于使用事件和事件句柄的常规信息。 关于事件常规信息 定义事件句柄 Navigator 4.0 中的事件 event onAbort onBlur onChange onClick onDblClick onDragDrop onError onFocus onKeyDown ...

    onsubmit=return checkAll()保存但能运行

    onsubmit=return checkAll()保存但能运行 myeclisep1.0

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

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

    js验证表单 js验证表单

    2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 1. 检查一段字符串是否全由数字组成 2. 怎么判断是否是字符 3. ...

    Form表单的action和onSubmit示例介绍

    第一:action是form的属性,html5已经将其定义为必需的属性值,onSubmit为事件,通过&lt;input type=submit /&gt;提交时进行一个函数验证。。 第二:要说执行的先后顺序,个人理解是onSubmit在先,先验证,验证返回...

    一句话JavaScript表单验证代码

    对于小表单(只有一两个表单域的表单)就不必再专门再用javascript写一个验证函数了,只需要在form的onsubmit事件里加上: 代码如下:onsubmit=”return domainname.value==”?(alert&#40;‘请输入搜索内容’&#41;,...

    JavaScript中文参考手册

    另外,本章还包括了关于使用事件和事件句柄的常规信息。 关于事件常规信息 定义事件句柄 Navigator 4.0 中的事件 onSubmit onUnload 第十章 LiveWire 数据库服务 本章包含了服务器端与 LiveWire 关联的对象:...

Global site tag (gtag.js) - Google Analytics