JS限制input框只能输入0~100的正整数的两种方法

作者:闭包旅人

时间:2026-10-31

浏览:519

本文介绍在JavaScript中限制input框仅允许输入0到100之间正整数的两种方法。第一种通过正则表达式结合if判断处理非数字及越界值,逻辑较为复杂但兼容性好;第二种利用HTML5的type、min和max属性直接限制,代码简洁。此外还补充了step属性对数值增减幅度的控制,并指出法二可能存在失效情况,建议根据实际需求选择。

文章目录

第一种方法实现较为复杂

<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)首先使用正则表达式判断输入是否为正整数,如果不是,则使用replace方法将非数字字符替换为空

(2)判断数值范围,如果大于100,则将输入值直接设为100

(3)如果小于0,则将输入值设为null

注意:需要将input的type类型设置为number类型,以限制只能输入数字(包含浮点型和整型数据)

第二种方法实现较为简单

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

直接通过设置三个属性:type、min、max即可,从而限制输入0~100的整数

注意:如果想输入浮点型数据,就将min、max后增加小数位数定义浮点类型数据的输入

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

补充说明

还有一个属性step,input框可以通过键盘的上下键去增加或者减少input输入的数值,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的正整数的文章就介绍到这了,更多相关input框限制输入内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章