防止表单重复提交的实现方法！

tznktg

我们做添加信息页面的时候经常会遇到这样的问题，用户有时候会重复的点击提交按钮（实际上测试人员经常这样干），会导致多次提交，产生重复数据，我们总是要写一段代码要在表单提交后把提交按钮设置disibled=true，这样的代码写了好几处。
　　
　　初步想法是通过attachEvent在form的onsubmit事件中挂一个方法，每次触发该事件的时候都调用我们定义的方法，我们可以给form增加一个submited属性，每次判断这个属性，为false的时候继续提交表单并且设置form.submited=true，反之说明表单已经提交，就不再表单。

接下来，遇到了一些麻烦：
提交表单有三种方式（我目前用过的，就这三种）
<form action=test.aspx onsubmit="return false;" name=form1>
1.<input type=submit >submit按钮
2.<input type=text>当form中只有一个文本本框按回车的时候
3.<input type=button onclick=javascript:form1.submit()>自己写脚本提交
</form>
前两种是可以触发 onsubmit事件的，但是第三种不会。

显然，仅仅捕获onsubmit事件时不行的，还必须在form的submit方法执行前，判断表单是否在提交。
看看下面的代码，我们就明白了。

    //修改当前页面所有表单的提交事件

1. function $setFormCheckSubmited()
   
2.     {
   
3.         var frms=document.forms;
   
4.         for(var i=0;i<document.forms.length;i++)
   
5.         {
   
6.             frms[i].baseSubmit = frms[i].submit;//保存表单原来的submit 方法
   
7.             frms[i].submited = false;//添加一个submited属性，并且设置其为false
   
8.             frms[i].submit = new Function("$submitForm(this)");//
   
9.             $addElementEventHandler(frms[i],"onsubmit","$submitForm(document.forms["+i+"])");
   
10.         }
    
11.     }
    
12.    
    
13.     //提交一个表单，如果当前表单已经提交，按么就不会继续提交该表单
    
14.     function $submitForm(frm)
    
15.     {
    
16.         if (frm.submited) return false;
    
17.         frm.submited=true;
    
18.         frm.baseSubmit();
    
19.     }
    
20. 
    
21.     //下面是addElementEventHandler的实现
    
22. 
    
23.     /*
    
24.         添加一个方法到到一个对象的一个的一个事件中
    
25.         element 要设置的对象  
    
26.         eventName 事件名称， 字符串类型的。
    
27.         methodName表示函数名称，字符串类型的。
    
28.     */
    
29.     function $addElementEventHandler(element,eventName,methodName)
    
30.     {
    
31.      if (document.all)
    
32.      {
    
33.             element.attachEvent(eventName,new Function(methodName));
    
34.      }
    
35.      else
    
36.      {
    
37.             if (eventName.substring(0,2)=="on") eventName=eventName.substring(2);//firefox中所有的事件名称前面是没有on的。
    
38.             element.addEventListener(eventName,new Function(methodName));
    
39.      }
    
40.     }

复制代码

tznktg

<SCRIPT language=javascript type=text/javascript>
function chkUserName()
{
        if(!isStr(document.all.userName.value) || len(document.all.userName.value) > 20 || len(document.all.userName.value) < 6)
        {
                alert("对不起,用户名必须为英文字母、数字或下划线，长度为6~20。");
                document.all.userName.focus();
                return false;
        }
        else
        {
                openHideWin('InfoForm/?strUser='+thisForm.userName.value)
        }
}
function checkThisForm() {
        if(!isStr(document.all.userName.value) || len(document.all.userName.value) > 20 || len(document.all.userName.value) < 6)
        {
                alert("对不起,用户名必须为英文字母、数字或下划线，长度为6~20。");
                document.all.userName.focus();
                return false;
        }
        if(len(document.all.password.value) > 20 || len(document.all.password.value) < 6 || !isStr(document.all.password.value))
        {
                alert("对不起,密码必须为英文字母、数字或下划线，长度为6~20。");
                document.all.password.focus();
                return false;
        }
        if (document.all.password.value != document.all.confirmPassword.value)
        {
                alert("对不起,密码与重复密码不一致!");
                document.all.confirmPassword.focus();
                return false;
        }
        if (len(trim(document.all.companyName.value)) < 6)
        {
                alert("对不起,公司名称不能少于6个字符(不包括字符内的空格)!");
                document.all.companyName.focus();
                return false;
        }
        if (len(document.all.companyName.value)>100)
        {
                alert("对不起,公司名称描述过长(最大100个字符,50位中文),请更正!");
                document.all.companyName.focus();
                return false;
        }
        if (len(trim(document.all.licenceNumber.value))>80)
        {
                alert("对不起,公司营业执照描述过长(最大80个字符,40位中文),请更正!");
                document.all.licenceNumber.focus();
                return false;
        }
        if (isNaN(document.all.foundDate_Y.value) || len(document.all.foundDate_Y.value)!="4" || document.all.foundDate_Y.value.indexOf(".")!="-1")
        {
                alert("对不起,请输入正确的公司成立日期的年份部份(四位整数不含小数点)!");
                document.all.foundDate_Y.focus();
                return false;
        }
        if (document.all.foundDate_Y.value.indexOf("'")!="-1")
        {
                alert("公司成立年份中含有特殊字符,请重新输入正确的成立年份!");
                document.all.foundDate_Y.focus();
                return false;
        }
        if (len(trim(document.all.foundDate_Y.value)) < 4 || (!checkDate(document.all.foundDate_Y.value,document.all.foundDate_M.value,document.all.foundDate_D.value )))
        {
                alert("公司成立日期格式或范围不正确,请重新输入!");
                document.all.foundDate_Y.focus();
                return false;
        }
        if (len(trim(document.all.registerFund.value)) < 1 || isNaN(document.all.registerFund.value))
        {
                alert("对不起,请输入注册资金,必须为数字!");
                document.all.registerFund.focus();
                return false;
        }
        /*
        if (len(trim(document.all.companyIntroduction.value)) < 50 || len(trim(document.all.companyIntroduction.value)) > 5000)
        {
                alert("对不起,公司简介必须在50－5000之间,为确保申请成功和招聘效果,请尽可能填写详细资料!");
                document.all.companyIntroduction.focus();
                return false;
        }
        */
        if (len(trim(document.all.contactPerson.value)) < 1)
        {
                alert("对不起,联系人不能为空!");
                document.all.contactPerson.focus();
                return false;
        }
        if (len(trim(document.all.contactPerson.value))>50)
        {
                alert("联系人资料描述过长(最大50个字符,25位中文)!");
                document.all.contactPerson.focus();
                return false;
        }
        if (len(trim(document.all.contactTel_Z.value))>20 || len(trim(document.all.contactTel_Z.value)) < 3)
        {
                alert("对不起,电话区号长度不合法,请更正!");
                document.all.contactTel_Z.focus();
                return false;
        }
        if (len(trim(document.all.contactTel.value))>50 || len(trim(document.all.contactTel.value)) < 5)
        {
                alert("对不起,电话号码长度不合法,请更正!");
                document.all.contactTel.focus();
                return false;
        }
        var tel;
        tel = document.all.contactTel_Z.value + document.all.contactTel.value + document.all.contactTel_E.value;
        if(!isNum(tel) || tel.indexOf(".")!="-1")
        {
                alert("对不起,您输入的电话号码不合法,必须输入数字符号且不含小数点!");
                document.all.contactTel_Z.focus();
                return false;
        }
        if(tel.indexOf("'")!="-1")
        {
                alert("对不起,您输入的电话号码不合法,请更正!");
                document.all.contactTel_Z.focus();
                return false;
        }
        if (len(trim(document.all.contactFax_Z.value))>20)
        {
                alert("对不起,传真区号长度不合法,请更正!");
                document.all.contactFax_Z.focus();
                return false;
        }
        if (len(trim(document.all.contactFax.value))>50)
        {
                alert("对不起,传真号码长度不合法,请更正!");
                document.all.contactFax.focus();
                return false;
        }
        var fax;
        fax = document.all.contactFax_Z.value + document.all.contactFax.value + document.all.contactFax_E.value;
        if (!isNum(fax) || fax.indexOf(".")!="-1")
        {
                alert("对不起,传真号码不合法,必须输入数字符号且不含小数点!");
                document.all.contactFax_Z.focus();
                return false;
        }
        if (fax.indexOf("'")!="-1")
        {
                alert("对不起,您输入的传真号码不合法,请更正!");
                document.all.contactFax_Z.focus();
                return false;
        }
        if(!isEmail(document.all.email.value))
        {
                alert("请正确填写邮箱地址!");
                document.all.email.focus();
                return false;
        }
        if (len(document.all.address_P.value) < 1)
        {
                alert("请选择贵公司所在省（直辖市）!");
                document.all.address_P.focus();
                return false;
        }
        if (len(document.all.address.value) < 1)
        {
                alert("请详细填写贵公司通讯地址!");
                document.all.address.focus();
                return false;
        }
        if (len(trim(document.all.address.value))>100)
        {
                alert("对不起,公司通讯地址过长(最大100个字符,50位中文),请更正!");
                document.all.address.focus();
                return false;
        }
        if (!isNum(document.all.zipCode.value))
        {
                alert("对不起,邮政编码必须为数字符号!");
                document.all.zipCode.focus();
                return false;
        }
        if (len(trim(document.all.zipCode.value))>6 || document.all.zipCode.value.indexOf(".")!="-1")
        {
                alert("对不起,邮政编码必须输入数字符号不含小数点且最大长度为6!");
                document.all.zipCode.focus();
                return false;
        }
        if (len(trim(document.all.homePage.value))>100)
        {
                alert("对不起,公司主页资料描述过长(最大100个字符,50位中文),请更正!");
                document.all.homePage.focus();
                return false;
        }
        document.all.thisForm.submit();
        document.all.thisForm.Submit.disabled = true;
                     document.all.thisForm.Submit.value = "  请稍候...  ";
}
</SCRIPT>

tznktg

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="../style/reg.css" rel="stylesheet" type="text/css" />
<link href="../style/ssredar_base.css" rel="stylesheet" type="text/css" />
<style>
p {
  text-indent: 0;
  padding-left: 30px;
  line-height: 30px;}
a {
    color: #333;}
</style>
<SCRIPT LANGUAGE="JavaScript">
function f_frameStyleResize(targObj){
var targWin = targObj.parent.document.all[targObj.name];
if(targWin != null) {
  var HeightValue = targObj.document.body.scrollHeight;
  targWin.style.pixelHeight = HeightValue;
}
}
function f_iframeResize(){
bLoadComplete = true;
f_frameStyleResize(self);
}

var bLoadComplete = false;
</SCRIPT>

<OBJECT id=SSReaderPlug1 style="LEFT: 0px; WIDTH: 0px; TOP: 0px; HEIGHT: 0px" classid=clsid:1DE88635-1C72-401E-B23B-93FA86D30F3B
  codebase="/SSReaderPlug.cab#version=3,0,0,1" height=0 width=0>
  <PARAM NAME="NewVer" VALUE="3.9.1">
  <PARAM NAME="NewData" VALUE="2007-01-23">
  <PARAM NAME="DownloadPath" VALUE="http://www.ssreader.com/download/">
</OBJECT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function CovertCRLFToBR(s)
    {
     var i;
     var s2 = s;
     
     while(s2.indexOf(".")>0)
     {
     i = s2.indexOf(".");
     s2 = s2.substring(0, i) + s2.substring(i + 1, s2.length);
     }
     return s2;
    }

function GetHddID(){
    var Param;
           var Ver;
           Ver = SSReaderPlug1.SSReaderVer;
           Ver = Ver.substring(0,10);
           document.FORM1.SSVer.value = Ver;
           Ver = CovertCRLFToBR(Ver);
        if(Ver>0 && (Ver-3730001) < 0)
        {
                Param = SSReaderPlug1.GetHDDKey() ;
                document.FORM1.Hddinfo.value = Param;
        }
        else
        {
                Param = SSReaderPlug1.GetComputeID()
                document.FORM1.Hddinfo.value = Param;
        }
}
-->
</Script>
<SCRIPT language='JavaScript'>
function CheckUserName(){
        if (FORM1.UserName.value == '' ){
                alert('请输入要注册的会员!');
                FORM1.UserName.focus();
                return false;
        }
        FORM1.NextStep.disabled=true;
        FORM1.NextStep.value='请稍后...'
       
        return true;
}
</SCRIPT>
</head>

<BODY onLoad='GetHddID();f_iframeResize()'>

<!--注册-->
<a name="top"></a>
<h5 id="reg_title">新用户注册</h5>
<form action="/reg/registernew.dll" method="POST" name="FORM1" onSubmit="return CheckUserName();">
  <input id=Hddinfo2 name=Hddinfo type=hidden value=1996021993>
  <input id="SSVer2" name="SSVer" type="hidden" value="">
  <input id=Urls name=Urls type=hidden value="http://reg.ssreader.com/newuser.asp">
  <input id=Urld name=Urld type=hidden value="http://reg.ssreader.com/lineuser.asp">
  <input id=Proc2 name=Proc type=hidden value=1>
  <div id="reg_userland_licence" class="reg_userland_info">
  <div class="reg_user_title" id="r_user">第二步：设定用户名 </div>
  <p>* 输入一个您喜欢的字母组合 </p>
  <p>* 用户名:
    <input name="UserName" id="usname" type="text" size="16" maxlength="16" />
    <input name="jiance" type="button" value="检测用户名" onClick="if(FORM1.usname.value==''){alert('请输入用户名');return;};window.open ('ckuser.asp?Username='+FORM1.usname.value,'newwindow','height=140,width=440,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');"/>
  </p>
  <p><font color="red"></font></p>
  <h6>说 明：</h6>
  <p>1、输入您想注册的用户名(必须以字母开头，纯字母或字母与数字的组合，长度不超过16位)，如果该用户名没有被占用，就可以继续注册。</p>
  <p>2、下载的图书是加密数据，与您注册的用户名直接相关，所以请不要申请使用多个用户名。 </p>
  <p>3、请牢记您申请的用户名和密码，忘记它们将会导致您已下载的图书资料无法阅读。 </p>
  <p>4、如果您已注册过超星用户名，请使用[续费充值]功能成为超星会员或充值星币，以获得购买、阅读、下载、打印图书资料等服务权限。</p>
  <h6 style="color:red;">请详细阅读超星数字图书网用户服务协议，这关系到您的权利与利益！</h6>
  <div style="width: 100%; text-align: center; margin: 25px 0 0 0;">
    <input name="NextStep" id="NextStep" type="submit" value="下一步" />  </div>
</div>
</form>
</body>
</html>

tznktg

不管是System还是WEBSITE,不管是数据的增加还是修改都涉及到表单的提交。但是由于宽带的限制，对于页面数据的提交，页面的数据处理总是需要一定的时间。导致有一部分的用户，会重复点击提交按钮。要是不进行特殊的处理的话，会导致相同数据。当然这是我们不想看到的事情。也不是客户想要的。

所以我们不应该let 这事情发生。
方法我觉得应该分为两种：

1.我们可以在服务器端处理这些重复数据，而且这部分处理会增加服务器负担，呵呵，这部分不是我这篇文章讨论的重点。

2.客户端处理：
当然我们应该是用JAVASCRIPT来处理
其实试想一下，不管是用户一次提交，两次提交，N次提交，都是在同一个页面里。因此都是由同一个程序来处理的。
所以我们可以用一个全局变量来处理

1. 
   
2.   var submit=0;
   

复制代码

这个变量会一直在这个页面里。
所以来说我们可以let按钮提交一次，let此变量增加1，这样的话就可以计算出来用户到底提交了几次了，剩下的事情我们就好办了。
要是大于1的话，我们就可以禁止他的提交。

1. 
   
2.     var submit=0;
   
3.     function CheckIsRepeat()
   
4.     {
   
5.         if (++submit>1)
   
6.         {
   
7.             alert('An attempt was made to submit this form more than once; this extra attempt will be ignored.');
   
8.             return false;
   
9.         }
   
10.         return true;
    
11.     }
    

复制代码

测试CODE:

1.    
   
2. 
   
3. 
   
4. 
   
5. 
   
6.     var submit=0;
   
7.     function CheckIsRepeat()
   
8.     {
   
9.         if (++submit>1)
   
10.         {
    
11.             alert('An attempt was made to submit this form more than once; this extra attempt will be ignored.');
    
12.             return false;
    
13.         }
    
14.         return true;
    
15.     }
    

复制代码

tznktg

--------------------------------------------------------------------------------
在document.form1.submit();后加
document.body.innerHtml = "<center> Waiting...</center>";
//当然这里的html代码就由你发挥了，还可把这段写成函数，这样维护就方便了！

这一处理，就让用户在等待提交时不会误以为没提交而重复按提交按钮！