el-input限制输入数字,输入中文后数字校验失效

news2025/6/9 18:46:04

想要的效果:默认值为0,只能输入0-100的数字。

实现方式如下,使用 οnkeyup="this.value=this.value.replace(/\D/g,‘’)"限制只能输入数字,输入数字没有问题,使用@input实现数字不以0开头,也只能是0-100。但是当输入汉字时,确实没有显示上去,再输入数字能正常显示输入,但是校验不起作用了,超100的数字也能输入。

<el-input v-model="num1" maxlength="3"  onkeyup="this.value=this.value.replace(/\D/g,'')" @input="rowNumSingle"/>
rowNumSingle(value ) {
if (value === '0' || !value.startsWith('0')) {
          this.num1 = value
        } else {
          // 以0开头
          this.num1 = value[0] === '0' ? '0' : value.replace(/^0+/, '')
        }
        // 最大100
        this.num1 = Math.min(100, Math.max(0, value))
}

修改后的实现:先判断是否为数字,不是数字直接设为初始值0,否获取输入的数字并赋值

<el-input v-model="num1"  maxlength="3"  @input="rowNumSingle" />
if(isNaN(Number(value)) || value === '' ){
         this.num1 = 0
        return
      }
      const newValue = Number(value)
      this.num1 = newValue
        // 最大100
        this.num1 = Math.min(100, Math.max(0, newValue))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2405710.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

26考研——数据的表示和运算_整数和实数的表示(2)

408答疑 文章目录 二、整数和实数的表示1、整数的表示1.1、无符号整数的表示1.2、有符号整数的表示1.3、C 语言中的整数类型及类型转换1.3.1、C 语言中的整型数据类型1.3.2、有符号数和无符号数的转换1.3.3、不同字长整数之间的转换 2、实数的表示2.1、浮点数的相关概念2.2、浮…

关于智能体API参考接口

关于智能体在Flask的源码&#xff1a;请求体(在payload里的是请求体)、请求头&#xff08;在headers里的i局势请求头&#xff09;。 我的例子&#xff1a; 我的疑问&#xff1a;为什么没按Coze官方API文档格式&#xff0c;在Apifox里发POST请求却能收到回复&#xff1f; 1. 你…

直角坐标系和斜角坐标系

前情概要 笛卡尔坐标系是直角坐标系和斜角坐标系的统称。为什么会有这两种坐标系呢&#xff0c;教材中为什么最后只用直角坐标系呢&#xff1f;我们这样解释&#xff1a; 研究一维空间中的向量时&#xff0c;由于一维空间中的向量有无数条&#xff0c;如果我们选定一条作为基…

vmware 设置 dns

vmware 设置 dns 常用的 DNS&#xff08;Domain Name System&#xff09;服务器地址可以帮助你更快、更安全地解析域名。以下是一些国内外常用的公共 DNS 服务&#xff1a; 国内常用 DNS 阿里云 DNS IPv4: 223.5.5.5、223.6.6.6IPv6: 2400:3200::1、2400:3200:baba::1特点&am…

基于单片机的病房呼叫系统(源码+仿真)

该系统由以 STM32F4 为平台的监控终端以及以 CC2530 为平台的无线传感网组成。系统上电后自动完成 ZigBee 网络的组建、终端节点的加入&#xff0c;病人可利用便携式的病人终端发出呼叫求助请求信息、节点在线信息以及对护士的服务评价信息等&#xff0c;这些信息通过路由节点发…

基于微信小程序的睡眠宝系统源码数据库文档

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;睡眠宝系统被用户普遍使用&#xff0c;为方便用户能够可以…

VibePlayer

源代码地址&#xff1a; VibePlayer: VibePlayer是一款功能强大的Android音乐播放器应用&#xff0c;专为音乐爱好者设计&#xff0c;提供了丰富的音乐播放和管理功能。 用户需求 VibePlayer是一款功能强大的Android音乐播放器应用&#xff0c;专为音乐爱好者设计&#xff0…

【汇编逆向系列】三、函数调用包含单个参数之float类型-xmm0寄存器,sub,rep,stos,movss,mulss,addss指令

一、汇编代码 single_float_param:0000000000000060: F3 0F 11 44 24 08 movss dword ptr [rsp8],xmm00000000000000066: 57 push rdi0000000000000067: 48 83 EC 10 sub rsp,10h000000000000006B: 48 8B FC mov …

基于fpga的疲劳驾驶检测

基于fpga的疲劳驾驶检测 前言一、系统硬件设计二、系统软件设计系统上板实验测试 前言 代码基于网络大佬代码进行修改的。限制性比较大&#xff0c;不太灵活&#xff0c;当个本科毕业设计还是够的。 基于FPGA的疲劳检测模块硬件设计以FPGA核心控制模块为中心&#xff0c;通过…

感谢阿里云RDS产品及时的“光速服务”

❝ 开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, OceanBase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;共3000人左右…

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(十一)

下载buildroot https://buildroot.org/download.html下载交叉工具链 使用ST官方交叉工具链的话&#xff0c;在buildroot配置外部工具会有问题&#xff0c;所以直接使用正点原子的交叉编译工具 buildroot构建根文件系统 - 参考正点原子 配置 buildroot tar -vxf buildroot-20…

Linux68 FTP 测试 上传下载

6.在vi编辑器里&#xff0c;哪个命令能将光标移到第200行&#xff1f;&#xff08; B &#xff09; 7.A、200g B、:200 C、g200 D、G200 假如您需要找出 /etc/my.conf 文件属于哪个包 (package) &#xff0c;您可以执行&#xff08; D &#xff09;C A、 rpm -q /etc/my.co…

山东大学《数据可视化》期末复习宝典

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a;&#x1f3c0;山东大学期末速通专用_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1…

【Elasticsearch】映射:Join 类型、Flattened 类型、多表关联设计

映射&#xff1a;Join 类型、Flattened 类型、多表关联设计 1.Join 类型1.1 主要应用场景1.1.1 一对多关系建模1.1.2 多层级关系建模1.1.3 需要独立更新子文档的场景1.1.4 文档分离但需要关联查询 1.2 使用注意事项1.3 与 Nested 类型的区别 2.Flattened 类型2.1 实际运用场景和…

SpringBoot十二、SpringBoot系列web篇之过滤器Filte详解

一、前言 JavaWeb三大组件Servlet、Filter、Listener&#xff0c;其中之一便是过滤器Filter。 其实&#xff0c;Filter我们平常用的不多&#xff0c;一般多为项目初期搭建web架构的时候使用&#xff0c;后面用的就少了&#xff0c;在日常业务开发中不太可能碰到需要手写Filte…

【RTSP从零实践】1、根据RTSP协议实现一个RTSP服务

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

行为设计模式之Iterator(迭代器)

行为设计模式之Iterator&#xff08;迭代器&#xff09; 摘要&#xff1a; 迭代器模式(Iterator)是一种行为设计模式&#xff0c;它提供顺序访问聚合对象元素的方法&#xff0c;同时不暴露内部结构。该模式由迭代器接口(Iterator)、具体迭代器(ConcreteIterator)、聚合接口(Ag…

FPGA点亮ILI9488驱动的SPI+RGB接口LCD显示屏(一)

FPGA点亮ILI9488驱动的SPIRGB接口LCD显示屏 ILI9488 RGB接口初始化 目录 前言 一、ILI9488简介 二、3线SPI接口简介 三、配置寄存器介绍 四、手册和初始化verilog FPGA代码 总结 前言 ILI9488是一款广泛应用于嵌入式系统和电子设备的彩色TFT LCD显示控制器芯片。本文将介…

如何实现本地mqtt服务器和云端服务器同步?

有时候&#xff0c;一个物联网项目&#xff0c;A客户想要本地使用&#xff0c;B客户想要线上使用&#xff0c;C客户想要本地部署&#xff0c;当有网环境时能线上使用。这个时候就需要本地MQTT服务和线上MQTT服务能相互自动转发。 后来经我一翻研究&#xff0c;其实Activemq支持…

windows10下搭建nfs服务器

windows10下搭建nfs服务器 有参考这篇博客 Windows10搭建NFS服务 - fuzidage - 博客园 下载 NFS Server这个app 通过网盘分享的文件&#xff1a;nfs1268 (1).exe 链接: https://pan.baidu.com/s/1rE4h710Uh-13kWGXvjkZzw 提取码: mwa4 --来自百度网盘超级会员v5的分享 下载后…