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

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

var numRegex = /\D/g再通過(guò)JavaScript的

onblur 事件：

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

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

語(yǔ)法

HTML 中：

<element onblur="SomeJavaScriptCode">

JavaScript 中:

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

JavaScript 中, 使用 addEventListener() 方法:

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);
}

以上這篇限制只能輸入數(shù)字的實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)的登陸遮罩效果匯總
小編給大家推薦幾款使用Javascript實(shí)現(xiàn)的遮罩效果登陸框，其實(shí)這種效果是很常見(jiàn)的，在許多互動(dòng)的社區(qū)及其它的一些地方，彈出框應(yīng)用想當(dāng)流行，在不妨礙網(wǎng)頁(yè)運(yùn)行的情況下，用戶可以輸入登錄信息，實(shí)現(xiàn)完美登錄。
2015-11-11
JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素css樣式實(shí)現(xiàn)切換功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
bootstrap輸入框組代碼分享
Bootstrap 支持的另一個(gè)特性，輸入框組,輸入框組擴(kuò)展自表單控件.下面小編給大家介紹bootstrap輸入框組的代碼，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
淺談bootstrap使用中的一些問(wèn)題以及解決過(guò)程
下面小編就為大家?guī)?lái)一篇淺談bootstrap使用中的一些問(wèn)題以及解決過(guò)程。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
js中apply與call簡(jiǎn)單用法詳解
這篇文章主要為大家詳細(xì)介紹了js中apply與call簡(jiǎn)單用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題
小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說(shuō),文件不能批量提交,只能一個(gè)個(gè)的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題,需要的朋友可以參考下
2023-11-11
Ajax和Comet技術(shù)總結(jié)
Ajax是一種技術(shù)，一種能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)需卸載頁(yè)面的技術(shù)，能夠使網(wǎng)頁(yè)具備更優(yōu)的用戶體驗(yàn)。Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（XHR）。本文從XHR開始談起，理解Ajax技術(shù)的特點(diǎn)，再對(duì)跨域以及Comet等技術(shù)進(jìn)行簡(jiǎn)要理解和總結(jié)。下面跟著小編一起來(lái)看下吧
2017-02-02
JavaScript 中如何實(shí)現(xiàn)并發(fā)控制
在日常開發(fā)過(guò)程中，你可能會(huì)遇到并發(fā)控制的場(chǎng)景，比如控制請(qǐng)求并發(fā)數(shù)。那么在 JavaScript 中如何實(shí)現(xiàn)并發(fā)控制呢？在回答這個(gè)問(wèn)題之前，我們來(lái)簡(jiǎn)單介紹一下并發(fā)控制。
2021-05-05
js實(shí)現(xiàn)倒計(jì)時(shí)效果（小于10補(bǔ)零）
本文主要介分享了js實(shí)現(xiàn)倒計(jì)時(shí)效果（小于10補(bǔ)零）的實(shí)例代碼，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
axios基本入門用法教程
之前當(dāng)vue更新到2.0之后，作者就宣告不再對(duì)vue-resource更新，而是推薦的axios,前一段時(shí)間用了一下，現(xiàn)在說(shuō)一下它的基本用法。文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-03-03