js限制文本框只能輸入整數(shù)或者帶小數(shù)點的數(shù)字

更新時間：2015年04月27日 11:42:22 投稿：hebedich

如何用js限制文本框輸入,只允許輸入整數(shù)或帶一位小數(shù)的浮點數(shù),本文分享一例代碼,有需要的朋友參考下

做表單驗證的時候是否會碰到驗證某個輸入框內(nèi)只能填寫數(shù)字呢，僅允許輸入整數(shù)數(shù)字或者帶小數(shù)點的數(shù)字。下面這段代碼也許能幫到你！通過對當前輸入框定義onkeypress，onkeyup，onblur事件對表單做了充分的驗證，結(jié)果還是非?？孔V的。

復制代碼代碼如下:

<input type="text" value="" t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}" /> 

下面對onkeypress，onkeyup，onblur事件做簡要的解釋。

onkeypress 事件會在鍵盤按鍵被按下并釋放一個鍵時發(fā)生。

onkeyup 事件會在鍵盤按鍵被松開時發(fā)生。

onblur 事件會在對象失去焦點時發(fā)生。

另外需要注意的是如果需要做嚴格驗證的表單，一定要客戶端和服務器端進行雙重驗證，以上緊緊做了客戶端驗證。如果稍微懂點程序的人，能夠很輕松的繞過這段驗證代碼，如果服務器端沒有進行驗證的話，就很容易出問題的。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

TypeScript中的互斥類型實現(xiàn)方法示例
用了一年時間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
JavaScript中的一些實用小技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中的一些實用小技巧，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
Bootstrap字體圖標無法正常顯示的解決方法
這篇文章主要為大家詳細介紹了Bootstrap字體圖標無法正常顯示的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
JS實現(xiàn)左邊列表移到到右邊列表功能
這篇文章主要介紹了JS實現(xiàn)左邊列表移到到右邊列表功能,實現(xiàn)功能主要是左邊的下拉框內(nèi)容添加到右邊的下拉框，支持多選移動，且同時將右邊的下拉框?qū)ο笠瞥?，需要的朋友可以參考?/div> 2018-03-03
前端圖片懶加載(lazyload)的實現(xiàn)方法(提高用戶體驗)
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節(jié)省帶寬，提高頁面加載速度，相對的，也能減少服務器壓力,下面通過本文給大家分享圖片懶加載lazyload的實現(xiàn)方法，感興趣的朋友一起看看吧
2017-08-08
小議Function.apply() 之一------(函數(shù)的劫持與對象的復制)
小議Function.apply() 之一------(函數(shù)的劫持與對象的復制)...
2006-11-11
最常見和最有用的字符串相關(guān)的方法詳解
本文主要介紹了最常見和最有用的字符串相關(guān)的方法，具有一定的參考價值，下面跟著小編一起來看下吧
2017-02-02
js計算系統(tǒng)當前日期是星期幾的方法
這篇文章主要為大家詳細介紹了js計算系統(tǒng)當前日期是星期幾4種方法,需要的朋友可以參考下
2016-07-07
js獲取頁面引用的css樣式表中的屬性值方法(推薦)
下面小編就為大家?guī)硪黄猨s獲取頁面引用的css樣式表中的屬性值方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript+canvas實現(xiàn)五子棋游戲
這篇文章主要為大家詳細介紹了JavaScript+canvas實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05