限制input框只能输入0~100的正整数

2023-10-27

法一:(复杂)

<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

法二有时候会失效,没找到原因~

失效的话就用法一~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

限制input框只能输入0~100的正整数 的相关文章

随机推荐

  • 关于SVM的一点笔记

    关于SVM的一点笔记 一 简单了解 1 感知机 perceptron 感知机是一种类似于生物中神经细胞功能的人工神经元 它可以把一个或者多个输入 x 1 x 1 x1 x
  • flask最基础的增删改查实现步骤及代码

    分类序列化器 写入要序列化的字段 user info id fields Integer name fields String 商品序列化器 写入要序列化的字段 goods info id fields Integer name field
  • Spring系列面试题(Spring、SpringMvc、SpringBoot)

    一 springboot自动配置原理 自动装配 简单来说就是自动把第三方组件的Bean装载到Spring IOC器里面 不需要开发人员再去写Bean的配置 在Spring Boot应用里面 只需要在启动类加上 SpringBootAppli
  • 五张图带你理解 RocketMQ 顺序消息实现机制

    大家好 我是君哥 今天聊一聊 RocketMQ 的顺序消息实现机制 在有些场景下 使用 MQ 需要保证消息的顺序性 比如在电商系统中 用户提交订单 支付订单 订单出库这 3 个消息应该保证顺序性 如下图 对于 RocketMQ 来说 主要是
  • Electron桌面开发入门

    1 初始化工作 midir electron demo cd electron demo npm init 到package json 文件下将入口文件修改为main js main main js 并且创建main js文件 electr
  • Java猫和狗(继承,多态,抽象,接口版)上

    Java的继承 抽象 多态 接口的简单应用 我们利用 猫和狗都是动物类 然后猫会抓鱼 狗会看门的这些方法来简单应用一下继承 抽象 多态 接口 简单思路就是 1 定义动物类 2 定义猫 狗类 让他们成为动物的子类 3 编写测试类 继承 使子类
  • PTA L1-016:查验身份证 (python)

    一 题目要求 二 参考代码 sheet 0 1 1 0 2 X 3 9 4 8 5 7 6 6 7 5 8 4 9 3 10 2 w 7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 n int input c 0 f
  • ARM单片机FATFS文件系统的移植

    ARM单片机FATFS文件系统的移植 测试效果 前提条件 下载所需源码 FATFS 文件系统 SFUD万能驱动 加入工程 接口驱动 测试代码 FreeRTOS10 0 1 FATFS FF14A SFUD V1 1 0 STM32F103Z
  • 超过2t硬盘分区_大于2T的磁盘怎么分区呢?

    由于购买了磁盘柜专门用作存储 后来考虑到磁盘容量的动态管理 准备采用LVM进行动态扩容管理了 首先让前端挂载机器能够识别到磁盘柜的逻辑卷组 比如 dev sdb 先介绍2种分区表 MBR分区表 MBR含义 主引导记录 所支持的最大卷 2T
  • 6.8过程纹理

    过程纹理也称为自定义纹理 根据计算得出 这个例子使用了位置和原点的距离作为输入参数 并加入了动画 但是和目前的纹理没任何关系 纯手工计算 因为位置是三维的 所以在涉及到纹理的几个地方都要改为三维的 struct RENDEROBJECT D
  • Java中的&、&&、

    关于这几个的运算符我一代码的实例来介绍 如下 1 首先它们都是逻辑运算符 但是 和 是短路运算符 也就是只判断运算符左边的即可 就可以确定整个表达式的结果了 所以它的执行效率高于 和 因为这两个运算符需要将表达式中所有的boolean值都判
  • JAVA开发(行业现状与未来)

    JAVA开发行业经过了这么多年的发展 曾经从一个机顶盒程序起家 到超过3亿台以上设备都在运行JAVA程序 JAVA语言见证了整个互联网化的工业化过程 许许多多的东西从从传统模式搬到了线上 特别是电子商务和网络社交的发展 大量的资金投入的这个
  • 【算法系列篇】前缀和

    文章目录 前言 什么是前缀和算法 1 模板 前缀和 1 1 题目要求 1 2 做题思路 1 3 Java代码实现 2 模板 二维前缀和 2 1 题目要求 2 2 做题思路 2 3 Java代码实现 3 寻找数组的中心下标 3 1 题目要求
  • 【MATLAB第67期】# 源码分享

    MATLAB第67期 源码分享 基于MATLAB的morris全局敏感性分析 一 代码展示 clear all npoint 100 在分位数超空间中要采样的点数 计算次数iter npoint nfac 1 nfac 20 研究函数的不确
  • 浏览器跨域问题

    1 同源策略 同源策略是一种约定 是浏览器最核心也是最基本的安全功能 可以说Web是构建在同源策略基础之上的 浏览器之上针对同源策略的一种实现 同源 协议 域名 端口号都相同的才称为 同源 同源策略用于限制一个origin的文档或者它加载的
  • 随机选择一个三位以内的数字作为答案。用户输入一个数字,程序会提示大了或是小了,直到用户猜中。

    import random b random randint 0 999 A input input a 0 999 number a int A 用户输入 while a b if a gt b A input input a less
  • vue+图片上传+预览

    学习记录 实现本地图片上传和预览 切记使用 accept image 可以指定文件类型
  • 逐步解读HTTP报文的组成及含义

    如果说HTTP是因特网的信使 那么HTTP报文就是运送的包裹 所有的HTTP程序都是通过互相发送报文来完成工作的 本文将介绍HTTP报文的流动方式 报文的组成部分 请求和响应报文之间的区别等 报文流 HTTP报文是在HTTP应用程序之间发送
  • Java并发编程详解:实现高效并发应用的关键技术

    文章目录 引言 一 线程安全性 二 并发集合 结论 引言 在当前的计算机领域 高效的并发编程对于Java开发人员而言变得越发重要 作为流行的编程语言 Java提供了强大的并发编程支持 使开发人员能够充分发挥多核处理器和线程的潜力 构建高性能
  • 限制input框只能输入0~100的正整数

    法一 复杂