欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript禁止用戶多次提交的兩種方法

 更新時間：2016年07月24日 16:58:55   作者：924256520  
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

【當(dāng)服務(wù)器超載時，會出現(xiàn)提交卡頓的現(xiàn)象，但是用戶在操作時，會不停重復(fù)點擊提交，會造成服務(wù)器壓力更大。所以我們需要進行限制】

[1]將提交按鈕禁止

<html>
　　<head>
　　　　<script>
　　　　　　//禁止默認(rèn)行為  因為這里要模擬服務(wù)器超載的時候，所以需要先禁止掉submit按鈕自動提交的功能
　　　　function preventDef(event){
　　　　　　event=event||window.event;
　　　　　　if(event.preventDefault){
　　　　　　　　return event.preventDefault;
　　　　　　　　}else{
　　　　　　　　　return event.returnValue=false;
　　　　　　　　}
　　　　　　}
　　　　window.onload=function(){
　　　　var form=document.getElementsByTagName('form')[0];　　　　　　//獲取到form元素
　　　　var txt=form.elements['txt'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為txt的表單元素
　　　　var sub=form.elements['sub'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為sub的表單元素
　　　　form.onsubmit=function(event){　　　　　　　　　　　　　　　　　　//創(chuàng)建一個提交事件，因為submit是form來提交事件的，所以我們要禁止也需要通過form來禁止
　　　　　　event=event || window.event;　　　　　　　　　　　　　　　　　　
　　　　　　preventDef(event);　　　　　　　　　　　　　　　　　　　　　　//禁止掉默認(rèn)提交行為
　　　　　　sub.disabled=true　　　　//第一種就是在用戶提交完之后，將按鈕禁用不再讓用戶提交，等待提交完畢之后再釋放按鈕
　　　　　　
　　　　　　setTimeout(function(){　　　　　　　　　　　　　　　　　　　　//模擬5秒鐘后再提交
　　　　　　form.submit()},5000);
　　　　}
 
}
　　　　</script>
　　</head>
　　<body>
　　　　<form id="form">
　　　　　　<input type="text" id="txt" name="txt">
　　　　　　<input type="submit" id="sub">
　　　　</form>
　　</body>
</html>

[第二種 創(chuàng)建一個變量進行判斷]

[1]將提交按鈕禁止

<html>
　　<head>
　　　　<script>
　　　　　　//禁止默認(rèn)行為  因為這里要模擬服務(wù)器超載的時候，所以需要先禁止掉submit按鈕自動提交的功能
　　　　function preventDef(event){
　　　　　　event=event||window.event;
　　　　　　if(event.preventDefault){
　　　　　　　　return event.preventDefault;
　　　　　　　　}else{
　　　　　　　　　return event.returnValue=false;
　　　　　　　　}
　　　　　　}
　　　　window.onload=function(){
　　　　var form=document.getElementsByTagName('form')[0];　　　　　　//獲取到form元素
　　　　var txt=form.elements['txt'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為txt的表單元素
　　　　var sub=form.elements['sub'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為sub的表單元素
　　　　var flag=true;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//先創(chuàng)建一個變量，表示默認(rèn)的時候用戶還沒點擊提交
　　　　form.onsubmit=function(event){　　　　　　　　　　　　　　　　　　//創(chuàng)建一個提交事件，因為submit是form來提交事件的，所以我們要禁止也需要通過form來禁止
　　　　　　event=event || window.event;　　　　　　　　　　　　　　　　　　
　　　　　　preventDef(event);　　　　　　　　　　　　　　　　　　　　　　//禁止掉默認(rèn)提交行為
 　　　　　　if(flag==true){
　　　　　　　　　　flag=false;　　　　　　　　　　　　　　　　　　　　//表示用戶已經(jīng)點擊過提交按鈕
　　　　　　}else{
　　　　　　　　alert('正在提交，請勿重復(fù)提交')；　　　　　　　　　　
　　　　　　}
　　　　　　
　　　　　　setTimeout(function(){　　　　　　　　　　　　　　　　　　　　//模擬5秒鐘后再提交
　　　　　　form.submit()},5000);
　　　　}
}
　　　　</script>
　　</head>
　　<body>
　　　　<form id="form">
　　　　　　<input type="text" id="txt" name="txt">
　　　　　　<input type="submit" id="sub">
　　　　</form>
　　</body>
</html>

JavaScript禁止用戶多次提交的兩種方法

【當(dāng)服務(wù)器超載時，會出現(xiàn)提交卡頓的現(xiàn)象，但是用戶在操作時，會不停重復(fù)點擊提交，會造成服務(wù)器壓力更大。所以我們需要進行限制】

[1]將提交按鈕禁止

<html>
　　<head>
　　　　<script>
　　　　　　//禁止默認(rèn)行為  因為這里要模擬服務(wù)器超載的時候，所以需要先禁止掉submit按鈕自動提交的功能
　　　　function preventDef(event){
　　　　　　event=event||window.event;
　　　　　　if(event.preventDefault){
　　　　　　　　return event.preventDefault;
　　　　　　　　}else{
　　　　　　　　　return event.returnValue=false;
　　　　　　　　}
　　　　　　}
　　　　window.onload=function(){
　　　　var form=document.getElementsByTagName('form')[0];　　　　　　//獲取到form元素
　　　　var txt=form.elements['txt'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為txt的表單元素
　　　　var sub=form.elements['sub'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為sub的表單元素
　　　　form.onsubmit=function(event){　　　　　　　　　　　　　　　　　　//創(chuàng)建一個提交事件，因為submit是form來提交事件的，所以我們要禁止也需要通過form來禁止
　　　　　　event=event || window.event;　　　　　　　　　　　　　　　　　　
　　　　　　preventDef(event);　　　　　　　　　　　　　　　　　　　　　　//禁止掉默認(rèn)提交行為
　　　　　　sub.disabled=true　　　　//第一種就是在用戶提交完之后，將按鈕禁用不再讓用戶提交，等待提交完畢之后再釋放按鈕
　　　　　　
　　　　　　setTimeout(function(){　　　　　　　　　　　　　　　　　　　　//模擬5秒鐘后再提交
　　　　　　form.submit()},5000);
　　　　}
 
}
　　　　</script>
　　</head>
　　<body>
　　　　<form id="form">
　　　　　　<input type="text" id="txt" name="txt">
　　　　　　<input type="submit" id="sub">
　　　　</form>
　　</body>
</html>

[第二種 創(chuàng)建一個變量進行判斷]

[1]將提交按鈕禁止

<html>
　　<head>
　　　　<script>
　　　　　　//禁止默認(rèn)行為  因為這里要模擬服務(wù)器超載的時候，所以需要先禁止掉submit按鈕自動提交的功能
　　　　function preventDef(event){
　　　　　　event=event||window.event;
　　　　　　if(event.preventDefault){
　　　　　　　　return event.preventDefault;
　　　　　　　　}else{
　　　　　　　　　return event.returnValue=false;
　　　　　　　　}
　　　　　　}
　　　　window.onload=function(){
　　　　var form=document.getElementsByTagName('form')[0];　　　　　　//獲取到form元素
　　　　var txt=form.elements['txt'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為txt的表單元素
　　　　var sub=form.elements['sub'];　　　　　　　　　　　　　　　　　　　　//獲取到name屬性為sub的表單元素
　　　　var flag=true;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//先創(chuàng)建一個變量，表示默認(rèn)的時候用戶還沒點擊提交
　　　　form.onsubmit=function(event){　　　　　　　　　　　　　　　　　　//創(chuàng)建一個提交事件，因為submit是form來提交事件的，所以我們要禁止也需要通過form來禁止
　　　　　　event=event || window.event;　　　　　　　　　　　　　　　　　　
　　　　　　preventDef(event);　　　　　　　　　　　　　　　　　　　　　　//禁止掉默認(rèn)提交行為
 　　　　　　if(flag==true){
　　　　　　　　　　flag=false;　　　　　　　　　　　　　　　　　　　　//表示用戶已經(jīng)點擊過提交按鈕
　　　　　　}else{
　　　　　　　　alert('正在提交，請勿重復(fù)提交')；　　　　　　　　　　
　　　　　　}
　　　　　　
　　　　　　setTimeout(function(){　　　　　　　　　　　　　　　　　　　　//模擬5秒鐘后再提交
　　　　　　form.submit()},5000);
　　　　}
}
　　　　</script>
　　</head>
　　<body>
　　　　<form id="form">
　　　　　　<input type="text" id="txt" name="txt">
　　　　　　<input type="submit" id="sub">
　　　　</form>
　　</body>
</html>

以上所述是小編給大家介紹的JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料，希望對大家有所幫助！

相關(guān)文章

  • JavaScript中SQL語句的應(yīng)用實現(xiàn)

    JavaScript中SQL語句的應(yīng)用實現(xiàn)

    最近一直在用javascript在做項目 可是做著做著 感覺很多功能代碼都是重復(fù)的。
    2010-05-05
  • 詳解ES6數(shù)組方法find()、findIndex()的總結(jié)

    詳解ES6數(shù)組方法find()、findIndex()的總結(jié)

    這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • javascript中的event loop事件循環(huán)詳解

    javascript中的event loop事件循環(huán)詳解

    這篇文章主要給大家介紹了關(guān)于javascript中event loop事件循環(huán)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • JS+HTML5實現(xiàn)的前端購物車功能插件實例【附demo源碼下載】

    JS+HTML5實現(xiàn)的前端購物車功能插件實例【附demo源碼下載】

    這篇文章主要介紹了JS+HTML5實現(xiàn)的前端購物車功能插件,結(jié)合完整實例形式分析了JS結(jié)合HTML5的storage特性存儲數(shù)據(jù)實現(xiàn)購物車功能的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-10-10
  • JavaScript運動函數(shù)實例詳解

    JavaScript運動函數(shù)實例詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript的運動函數(shù)，使用實例在論證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • 深入了解JavaScript中正則表達式的使用

    深入了解JavaScript中正則表達式的使用

    正則表達式是匹配模式，要么匹配字符，要么匹配位置。在JavaScript中正則表達式常常用來驗證表單等。本文將帶大家深入了解一下JavaScript中的正則表達式應(yīng)該如何使用，需要的朋友可以參考一下
    2021-12-12
  • 用Javascript讀取中文COOKIE的解決辦法

    用Javascript讀取中文COOKIE的解決辦法

    用Javascript讀取中文COOKIE的解決辦法...
    2007-02-02
  • JS實現(xiàn)簡單的右下角彈出提示窗口完整實例

    JS實現(xiàn)簡單的右下角彈出提示窗口完整實例

    這篇文章主要介紹了JS實現(xiàn)簡單的右下角彈出提示窗口的方法,可實現(xiàn)點擊連接右下角彈出提示框的功能,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • 用js格式化金額可設(shè)置保留的小數(shù)位數(shù)

    用js格式化金額可設(shè)置保留的小數(shù)位數(shù)

    這篇文章主要介紹了如何用js格式化金額并設(shè)置保留的小數(shù)位數(shù),需要的朋友可以參考下
    2014-05-05
  • js日期格式化yyyy-MM-dd問題

    js日期格式化yyyy-MM-dd問題

    這篇文章主要介紹了js日期格式化yyyy-MM-dd問題，具有很好的參考價值，希望對大家大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01

最新評論