快捷導(dǎo)航

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

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

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

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

跨域表單提交狀態(tài)的變相判斷代碼
通過(guò)表單在iframe內(nèi)向一個(gè)跨域的url提交的時(shí)候，如何判斷提交成功了呢？這個(gè)，基本上，很難，因?yàn)闉g覽器安全沙箱的限制，我們沒(méi)有辦法通過(guò)獲得iframe內(nèi)部不同域頁(yè)面的信息。
2009-11-11
JavaScript 程序編碼規(guī)范
這是一套適用于JavaScript程序的編碼規(guī)范。它基于Sun的Java程序編碼規(guī)范。但進(jìn)行了大幅度的修改, 因?yàn)镴avaScript不是Java。
2010-11-11
javascript實(shí)現(xiàn)移動(dòng)端紅包雨頁(yè)面
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端紅包雨頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
JavaScript中的事件與異常捕獲詳析
這篇文章主要給大家介紹了關(guān)于JavaScript中事件與異常捕獲的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
10個(gè)很少使用的JavaScript?Console方法分享
你一定聽(tīng)說(shuō)過(guò)?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下
2023-09-09
微信小程序報(bào)錯(cuò):does?not?have?a?method?"xxxx"?to?ha
這篇文章主要給大家介紹了關(guān)于微信小程序報(bào)錯(cuò):does?not?have?a?method?"xxxx"?to?handle?event?"tap"的解決方案,文中將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
JS加載器如何動(dòng)態(tài)加載外部js文件
這篇文章主要介紹了JS加載器如何動(dòng)態(tài)加載外部js文件的相關(guān)資料,需要的朋友可以參考下
2016-05-05
JavaScript array常用方法代碼實(shí)例詳解
這篇文章主要介紹了JavaScript array常用方法代碼實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
js+cavans實(shí)現(xiàn)圖片滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js+cavans實(shí)現(xiàn)圖片滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
js與css的阻塞問(wèn)題詳析
JS具有阻塞特性,當(dāng)瀏覽器在執(zhí)行js代碼時(shí),不能同時(shí)做其它事情,下面這篇文章主要給大家介紹了關(guān)于js與css阻塞問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2021-07-07