JS限制input框只能输入0~100的正整数的两种方法
更新时间：2024年02月23日 16:14:05 作者：suoh's Blog
本文给大家分享两种方法实现JS限制input框只能输入0~100的正整数,方法二是直接通过设置三个属性,type、min、max即可,就可以设置0~100的整数,感兴趣的朋友跟随小编一起看看吧
法一：（复杂）
<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框限制输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了SVG描边动画的相关实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要给大家介绍了关于一次Webpack配置文件的分离实战记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
scrapyd schedule.json setting 传入多个值问题
这篇文章主要介绍了scrapyd schedule.json setting 传入多个值，本文给出了问题分析及思路解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
使用uni-app框架开发微信小程序,可以使用高德地图开发地图选点、搜索位置、定位、获取详细的地址信息、码值等信息,下面这篇文章主要给大家介绍了关于uniapp使用高德地图的超详细步骤,需要的朋友可以参考下2022-12-12
今天小编就为大家分享一篇layui导出所有数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文从列表、字符串和数字三个方面详细阐述了Python中要求每行输出5个的相关内容，并给出了相应的代码示例，在实际开发中，我们可以根据具体的需求灵活运用这些方法，以提高程序的输出效率和可读性,需要的朋友可以参考下2020-05-05
本篇文章主要是对js中浮点型运算的问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了JavaScript制作简易计算器的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了js 图片懒加载的实现，帮助大家更好的优化自身网页，提高网页响应速度，感兴趣的朋友可以了解下2020-10-10
最新评论