提交事件(submit)与重置事件(reset)

easy · 发表于 2013-4-23 01:14:46

在《action 和 onsubmit 的配合使用》中已经介绍过提交事件。这里将它和重置事件(reset) 合在一起演示。

提交事件(submit) 和重置事件(reset) 都是表单 (form) 中的事件，应该写在 <form>标签中。其中，提交事件是在提交表单时所激发的事件，重置事件是在重置表单时所激发的时间。提交事件多用于检测数据的有效性和完整性，重置事件多用于警告用户。

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 提交与重置事件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">

</script>
</head>
<body>

  <form name="myForm" action="submit.htm" onsubmit="return checkData()" onreset="return resetForm()">
   姓名: <input type="text" name="myName" /> <br />

密码：<input type="password" name="myPassword" /><br />

重复密码：<input type="password" name="myPassword2" /><br />

地址：<input name="address" type="text"><br />

邮编：<input name="postalcode" type="text"><br />

<input type="submit" value="注册" /> <input type="reset" value="重置">
</form>

</body>
</html>

运行效果如下图所示：

单击“注册”按钮时，会触发 <form> 标签中设置的 submit 事件，并调用 checkData() 函数；该函数的作用是校验表单中的数据是否有效，如果无效，返回 false ，否则返回 true 。在返回 false 时，浏览器会阻止表单提交。

当单击“重置”按钮时，会触发 reset 事件，并调用 resetForm() 函数，该函数会调用 confirm() 函数弹出一个确认框。如果单击确认框中的“确定”按钮，那么会返回 ture ，这样浏览器就会重置表单；如果点击的是“取消”按钮，那么会返回 false ，浏览器将会阻止重置表单。

		自动登录	找回密码
密码			立即注册

[HTML] 提交事件(submit)与重置事件(reset)

本帖子中包含更多资源

浏览过的版块