JS限制input框只能輸入0~100的正整數(shù)的兩種方法

更新時間：2024年02月23日 16:14:05 作者：suoh's Blog

本文給大家分享兩種方法實現(xiàn)JS限制input框只能輸入0~100的正整數(shù),方法二是直接通過設置三個屬性,type、min、max即可,就可以設置0~100的整數(shù),感興趣的朋友跟隨小編一起看看吧

法一：（復雜）

<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"

判斷語句一共三個if

（1）先用正則判斷是否為正整數(shù)，如果不是，就用replace方法將非數(shù)字的字符替換為為空

（2）判斷范圍，大于100，就讓輸入的值直接為100,

（3）小于0，就讓輸入的值為null

注意：需要將input的type類型設置為number類型，是限制只能輸入數(shù)字（包含浮點型和整型數(shù)據(jù)）

法二：（簡單）

<input type="number" min='0' max='100' v-model='testNum'>

直接通過設置是三個屬性，type、min、max即可，就可以設置0~100的整數(shù)

注意：如果想輸入浮點型數(shù)據(jù)，就將min、max 后增加小數(shù)位數(shù)定義浮點類型數(shù)據(jù)的輸入

<input type="number" min='0.00' max='100.00' v-model='testNum'>

補充：

還有一個屬性step，input框可以通過鍵盤的上下鍵去增加或者減少input輸入的數(shù)值，step設置為多少，那么增加或者減少的幅度就是多少。例如：

<input type="number" min='0.00' max='100.00' step='0.1' v-model='testNum'>

step='0.1' 那么通過鍵盤加減幅度就是0.1

法二有時候會失效，沒找到原因~

失效的話就用法一~

到此這篇關于JS限制input框只能輸入0~100的正整數(shù)的文章就介紹到這了,更多相關input框限制輸入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript CSS 通用循環(huán)滾動條
核心是 position:relative;，才能讓其內(nèi)部的 ul 以絕對定位，通過改變 top 值實現(xiàn)向上移位置。
2009-10-10
javascript下載文件5種方式實例詳解
在Web開發(fā)中文件下載功能是一個非常常見的功能,這篇文章主要給大家介紹了關于javascript下載文件5種方式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
Javascript基礎之數(shù)組的使用
這篇文章主要介紹了Javascript基礎之數(shù)組的使用的相關資料，介紹的非常詳解，具有參考借鑒價值，感興趣的朋友一起學習吧
2016-05-05
JavaScript實現(xiàn)猜數(shù)字小功能
本文主要介紹了JavaScript實現(xiàn)猜數(shù)字小功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2025-01-01
學前端,css與javascript重難點淺析
JavaScript是一種屬于網(wǎng)絡的腳本語言,已經(jīng)被廣泛用于Web應用開發(fā)，CSS（Cascading Style Sheet）層疊樣式表單，今天給大家分享css與javascript重難點，感興趣的朋友一起看看吧
2020-06-06
js showModalDialog彈出窗口實例詳解
本篇文章主要是對js showModalDialog彈出窗口進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
doctype后如何獲得body.clientHeight的方法
doctype后如何獲得body.clientHeight的方法...
2007-07-07
three.js加載obj模型的實例代碼
three.js是一款webGL框架，由于其易用性被廣泛應用。接下來通過本文給大家分享three.js加載obj模型的實例代碼，需要的朋友參考下吧
2017-11-11
Javascript的爺孫通信和組件自調用詳解
這篇文章主要為大家詳細介紹了Javascript的爺孫通信和組件自調用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
JS寫的數(shù)字拼圖小游戲代碼[學習參考]
昨天沒事做，就用JS寫了個數(shù)字拼圖的小游戲，自娛自樂。可惜關于逆序數(shù)的問題還沒解決，現(xiàn)在有時是拼不成的，大家見諒了。
2008-10-10