js阻止form表單重複提交

標籤：需要   move   隨機   大致   代碼   修改   function   button   token   

防止表單重複提交的方法總體來說有兩種，一種是在js中阻止重複提交；另一種是在後台利用token令牌實現，大致思路是產生一個隨機碼放到session和form表單的隱藏輸入框中，提交表單時兩者對比，表單處理完畢清空或者修改session中的token。

在js中處理簡單易懂，同時能解決我現在所做的項目中的問題，目前暫用js處理，後期如有需要再研究token機制。代碼如下：

1、表單提交後禁用提交按鈕（在本項目中表單提交完成後，如果處理成功都把form表單關掉了）

 1 /** 2  * form表單格式驗證通過之後、表單提交前將提交按鈕禁用(注意順序) 3  * @param submitBtnId 提交按鈕ID 4  * @param btnType 按鈕類型 ‘button‘或者‘linkbutton‘ 5  * @returns {Boolean} 6  */ 7 function disableSubmitBtn(submitBtnId, btnType){ 8   if(btnType == ‘button‘){ 9     $("#"+submitBtnId).attr("disabled","disabled");10   }else if(btnType == ‘linkbutton‘){11     $("#"+submitBtnId).linkbutton(‘disable‘);12   }13   return true;14 }

由於在項目中有用到普通button和easyUI的linkbutton兩種按鈕，而禁用這兩種按鈕的方法不同，所以需要多傳一個參數btnType(按鈕類型)

2、如果提交表單失敗則啟用按鈕，以便使用者修改內容後再次提交

 1 /** 2  * form表單提交失敗後將提交按鈕開啟,以便使用者修改資料後再次提交 3  * @param submitBtnId 提交按鈕ID 4  * @param btnType 按鈕類型 ‘button‘或者‘linkbutton‘ 5  * @returns {Boolean} 6  */ 7 function enableSubmitBtn(submitBtnId, btnType){ 8   if(btnType == ‘button‘){ 9     $("#"+submitBtnId).removeAttr("disabled");10   }else if(btnType == ‘linkbutton‘){11     $("#"+submitBtnId).linkbutton(‘enable‘);12   }13   return true;14 }

3、在每次表單提交時調用這兩個方法，具體放的位置根據實際商務邏輯而定

 

js阻止form表單重複提交