怎么限制input的text里輸入的值只能是數(shù)字(正則、js)

更新時間：2016年05月16日 13:46:04 作者：newbie

這篇文章主要通過正則表達(dá)式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下

當(dāng)我們在一些網(wǎng)站注冊賬號、填寫信息是，不小心將電話號碼填寫成漢字或其他英文字母了，這顯然是不正確的。為了幫助用戶更好地糾正輸入時的錯誤，在表單中填寫信息時，需要限制手機(jī)號、郵編、電話號碼這類文本框不能輸入其他字符，只能是數(shù)字。

通過使用正則匹配輸入的時候只是數(shù)字：

復(fù)制代碼代碼如下:

var numRegex = /\D/g

再通過JavaScript的onblur 事件：

定義和用法

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

Onblur 經(jīng)常用于Javascript驗(yàn)證代碼，一般用于表單輸入框

語法

HTML 中:

復(fù)制代碼代碼如下:

JavaScript 中:

object.onblur= function(){
//操作
myScript; 
}

JavaScript 中, 使用 addEventListener() 方法:

復(fù)制代碼代碼如下:

object.addEventListener('blur',myScript);

最終DEMO代碼：

var numRegexFn = function(obj){
obj.value = obj.value.replace(numRegex,'');
if(!obj.value){
alert('請輸入數(shù)字');
}else{
alert('pass');
}
}
phone.onblur = function(){
numRegexFn(this);
}

以上所述是小編給大家介紹的使用正則表達(dá)式和js限制只能輸入數(shù)字的相關(guān)內(nèi)容，希望對大家有所幫助，也希望大家多多的關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章:

相關(guān)文章

JS表單提交驗(yàn)證、input（type=number）去三角刷新驗(yàn)證碼
在進(jìn)行表單提交時，需要對輸入框和文本域等的value的合理性進(jìn)行驗(yàn)證，可以編寫form的onSubmit事件，下面給大家介紹js表單提交驗(yàn)證input（type=number）去三角刷新驗(yàn)證碼注意事項(xiàng)，一起看看吧
2017-06-06
JavaScript深度復(fù)制（deep clone）的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制（deep clone）的實(shí)現(xiàn)方法，涉及到j(luò)s深度復(fù)制相關(guān)知識，本文介紹的非常詳細(xì)，特此分享腳本之家平臺供大家參考
2016-02-02
10分鐘徹底搞懂微信小程序單頁面應(yīng)用路由
這篇文章主要給大家介紹了光宇微信小程序單頁面應(yīng)用路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
js簡單粗暴的發(fā)布訂閱示例代碼
這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
js對數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對數(shù)組中的數(shù)字從小到大排序，很多時候需要用的多，需要的朋友可以參考下
2012-09-09
js如何獲取圖片url的Blob值并預(yù)覽示例代碼
這篇文章主要給大家介紹了關(guān)于js如何獲取圖片url的Blob值并預(yù)覽的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
layui輸入框只允許輸入中文且判斷長度的例子
今天小編就為大家分享一篇layui輸入框只允許輸入中文且判斷長度的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
詳解可以用在VS Code中的正則表達(dá)式小技巧
這篇文章主要介紹了詳解可以用在VS Code中的正則表達(dá)式小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
微信通過頁面(H5)直接打開本地app的解決方法
這篇文章主要為大家詳細(xì)介紹了微信通過頁面(H5)直接打開本地app的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
uni-app 組件里面獲取元素寬高的實(shí)現(xiàn)
這篇文章主要介紹了uni-app 組件里面獲取元素寬高的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12