（转）表单的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 则会引起此次点击操作被判断为无效，则也就不会引起表单提交。

view source

 

print ?

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

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

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

view source

 

print ?

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

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

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

view source

 

print ?

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 就够了。