js限制文本框只能輸入整數(shù)或者帶小數(shù)點的數(shù)字
更新時間：2015年04月27日 11:42:22 投稿：hebedich
如何用js限制文本框輸入,只允許輸入整數(shù)或帶一位小數(shù)的浮點數(shù),本文分享一例代碼,有需要的朋友參考下
做表單驗證的時候是否會碰到驗證某個輸入框內(nèi)只能填寫數(shù)字呢，僅允許輸入整數(shù)數(shù)字或者帶小數(shù)點的數(shù)字。下面這段代碼也許能幫到你！通過對當(dāng)前輸入框定義onkeypress，onkeyup，onblur事件對表單做了充分的驗證，結(jié)果還是非?？孔V的。
復(fù)制代碼 代碼如下:
<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ā)生。
另外需要注意的是如果需要做嚴(yán)格驗證的表單，一定要客戶端和服務(wù)器端進行雙重驗證，以上緊緊做了客戶端驗證。如果稍微懂點程序的人，能夠很輕松的繞過這段驗證代碼，如果服務(wù)器端沒有進行驗證的話，就很容易出問題的。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- js判斷文本框輸入的內(nèi)容是否為數(shù)字
- js實現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法
- js控制文本框只輸入數(shù)字和小數(shù)點的方法
- JS限制文本框只能輸入數(shù)字和字母方法
- js限制文本框只能輸入數(shù)字方法小結(jié)
- javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對比)
- js限制文本框只能輸入數(shù)字(正則表達(dá)式)
- js 只能輸入數(shù)字和小數(shù)點的文本框改進版
- javascript之文本框輸入四個數(shù)字自動加空格的腳本
- 基于js實現(xiàn)的限制文本框只可以輸入數(shù)字
相關(guān)文章
用了一年時間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中的一些實用小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Bootstrap字體圖標(biāo)無法正常顯示的解決方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap字體圖標(biāo)無法正常顯示的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS實現(xiàn)左邊列表移到到右邊列表功能,實現(xiàn)功能主要是左邊的下拉框內(nèi)容添加到右邊的下拉框，支持多選移動，且同時將右邊的下拉框?qū)ο笠瞥枰呐笥芽梢詤⒖枷?/div> 2018-03-03
前端圖片懶加載(lazyload)的實現(xiàn)方法(提高用戶體驗)
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節(jié)省帶寬，提高頁面加載速度，相對的，也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
小議Function.apply() 之一------(函數(shù)的劫持與對象的復(fù)制)
小議Function.apply() 之一------(函數(shù)的劫持與對象的復(fù)制)...2006-11-11
本文主要介紹了最常見和最有用的字符串相關(guān)的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了js計算系統(tǒng)當(dāng)前日期是星期幾4種方法,需要的朋友可以參考下2016-07-07
下面小編就為大家?guī)硪黄猨s獲取頁面引用的css樣式表中的屬性值方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript+canvas實現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05最新評論