当前位置: 首页 > news >正文

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

想要的效果:默认值为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+/, '')}// 最大100this.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 = 0return}const newValue = Number(value)this.num1 = newValue// 最大100this.num1 = Math.min(100, Math.max(0, newValue))
http://www.lqws.cn/news/130285.html

相关文章:

  • Spark实战能力测评模拟题精析【模拟考】
  • 实时数据湖架构设计:从批处理到流处理的企业数据战略升级
  • HarmonyOS 实战:给笔记应用加防截图水印
  • 【HarmonyOS 5】生活与服务开发实践详解以及服务卡片案例
  • function as a service的极简方案:通过jupyterhub和gradio搭建FAAS平台(一)
  • 如何在 React 中监听 div 的滚动事件
  • 从Node.js到React/Vue3:流式输出技术的全栈实现指南
  • (2025)Windows修改JupyterNotebook的字体,使用JetBrains Mono
  • 前端工具库lodash与lodash-es区别详解
  • Elasticsearch中的刷新(Refresh)和刷新间隔介绍
  • Comparable和Comparator
  • 腾讯位置商业授权AOI边界查询开发指南
  • 【PmHub面试篇】PmHub 整合 TransmittableThreadLocal(TTL)缓存用户数据面试专题解析
  • 《胸椎后路切开复位内固定术风险管控标准化路径:MDT协作下的三级预防策略》 ——基于生物力学重建、智能预警系统与快速康复的整合方案
  • DINO-R1
  • 在本地电脑中部署阿里 Qwen3 大模型及连接到 Elasticsearch
  • 机器学习14-迁移学习
  • go语言的锁
  • 机器学习:聚类算法
  • golang常用库之-go-feature-flag库(特性开关(Feature Flags))
  • AI数字人软件开发:赋能企业数字化转型,打造智能服务新标杆
  • 跟着顶刊学配色 | 第 1~4 期
  • 中断、MsTimer2、Ticker、多任务功能详解
  • 麒麟+ARM架构安装mysql8的操作指南
  • 大数据分析07 数据链接
  • 第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
  • Shopify 主题开发:促销活动页面专属设计思路
  • 告别延迟,拥抱速度:存储加速仿真应用的解决方案【1】
  • DexUMI:以人手为通用操作界面,实现灵巧操作
  • 激活函数和归一化、正则化