曲径通幽论坛

标题: 提交事件(submit)与重置事件(reset) [打印本页]
作者: easy    时间: 2013-4-23 01:14
标题: 提交事件(submit)与重置事件(reset)
在《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">
<!--
    //检验数据有效性
    function checkData()
    {
        if (myForm.myName.value == "") {
            alert("请输入姓名");
        }
        else if (myForm.myPassword.value == "") {
            alert("请输入密码");
        }
        else if (myForm.myPassword2.value == "") {
            alert("请再一次确认密码");
        }
        else if (myForm.myPassword.value !== myForm.myPassword2.value) {
            alert("两次输入的密码不一致，请重新输入");
        }
        else if (myForm.postalcode.value.length != 0 && myForm.postalcode.value.length != 6) {
            alert("邮编应该是 6 位数字");
        }
        else {
            return true;
        }
        return false;
    }
   
    //提示清除表单
    function resetForm() {
        return confirm("该操作会清除表单中的所有数据.\n 是否确定充值表单？");
    }
-->
</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>
运行效果如下图所示：
[attach]1543[/attach]
单击“注册”按钮时，会触发 <form> 标签中设置的 submit 事件，并调用 checkData() 函数；该函数的作用是校验表单中的数据是否有效，如果无效，返回 false ，否则返回 true 。在返回 false 时，浏览器会阻止表单提交。

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



欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2