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

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

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

var numRegex = /\D/g

再通過(guò)JavaScript的onblur 事件：

定義和用法

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

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

語(yǔ)法

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('請(qǐng)輸入數(shù)字');
}else{
alert('pass');
}
}
phone.onblur = function(){
numRegexFn(this);
}

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

您可能感興趣的文章:

相關(guān)文章

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