JS限制input框只能輸入0~100的正整數(shù)的兩種方法
法一：（復(fù)雜）
<input type="number" oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null" v-model='testNum'>
核心判斷：
oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null"
判斷語句一共三個(gè)if
（1）先用正則判斷是否為正整數(shù)，如果不是，就用replace方法將非數(shù)字的字符替換為為空
（2）判斷范圍，大于100，就讓輸入的值直接為100,
（3）小于0，就讓輸入的值為null
注意：需要將input的type類型設(shè)置為number類型，是限制只能輸入數(shù)字（包含浮點(diǎn)型和整型數(shù)據(jù)）
法二：（簡單）
<input type="number" min='0' max='100' v-model='testNum'>
直接通過設(shè)置是三個(gè)屬性，type、min、max即可，就可以設(shè)置0~100的整數(shù)
注意：如果想輸入浮點(diǎn)型數(shù)據(jù)，就將min、max 后增加小數(shù)位數(shù)定義浮點(diǎn)類型數(shù)據(jù)的輸入
<input type="number" min='0.00' max='100.00' v-model='testNum'>
補(bǔ)充：
還有一個(gè)屬性step，input框可以通過鍵盤的上下鍵去增加或者減少input輸入的數(shù)值，step設(shè)置為多少，那么增加或者減少的幅度就是多少。例如：
<input type="number" min='0.00' max='100.00' step='0.1' v-model='testNum'>
step='0.1' 那么通過鍵盤加減幅度就是0.1
法二有時(shí)候會(huì)失效，沒找到原因~
失效的話就用法一~
到此這篇關(guān)于JS限制input框只能輸入0~100的正整數(shù)的文章就介紹到這了,更多相關(guān)input框限制輸入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript CSS 通用循環(huán)滾動(dòng)條
核心是 position:relative;，才能讓其內(nèi)部的 ul 以絕對(duì)定位，通過改變 top 值實(shí)現(xiàn)向上移位置。2009-10-10
在Web開發(fā)中文件下載功能是一個(gè)非常常見的功能,這篇文章主要給大家介紹了關(guān)于javascript下載文件5種方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Javascript基礎(chǔ)之?dāng)?shù)組的使用
這篇文章主要介紹了Javascript基礎(chǔ)之?dāng)?shù)組的使用的相關(guān)資料，介紹的非常詳解，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
JavaScript實(shí)現(xiàn)猜數(shù)字小功能
本文主要介紹了JavaScript實(shí)現(xiàn)猜數(shù)字小功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
學(xué)前端,css與javascript重難點(diǎn)淺析
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，CSS（Cascading Style Sheet）層疊樣式表單，今天給大家分享css與javascript重難點(diǎn)，感興趣的朋友一起看看吧2020-06-06
js showModalDialog彈出窗口實(shí)例詳解
本篇文章主要是對(duì)js showModalDialog彈出窗口進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
doctype后如何獲得body.clientHeight的方法
doctype后如何獲得body.clientHeight的方法...2007-07-07
three.js是一款webGL框架，由于其易用性被廣泛應(yīng)用。接下來通過本文給大家分享three.js加載obj模型的實(shí)例代碼，需要的朋友參考下吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了Javascript的爺孫通信和組件自調(diào)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03![JS寫的數(shù)字拼圖小游戲代碼[學(xué)習(xí)參考]](http://img.jbzj.com/images/xgimg/bcimg9.png)
JS寫的數(shù)字拼圖小游戲代碼[學(xué)習(xí)參考]
昨天沒事做，就用JS寫了個(gè)數(shù)字拼圖的小游戲，自娛自樂。 可惜關(guān)于逆序數(shù)的問題還沒解決，現(xiàn)在有時(shí)是拼不成的，大家見諒了。2008-10-10