表单的onsubmit事件与JavaScript的return

onsubmit 中返回 false 会引起取消表单提交
服务器君一共花费了166.989 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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

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

onclick 和 onsubmit 的区别:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文地址:http://www.nowamagic.net/librarys/veda/detail/722,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/722

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《PHP经典实例(第2版)》 斯克拉(David Sklar) (作者), 切贝特伯格(Adam Tracbtenberg) (作者), 李松峰 (译者), 秦绪文 (译者), 李丽 (译者)

PHP经典实例(第2版)能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边,大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起,足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中,您可以更加方便地找到各种编程问题的解决方案,《PHP经典实例(第2版)》中内容涵盖了:表单处理;Session管理;数据库交互;使用Web服务。

更多计算机宝库...