输入框限制输入内容——只能输入数字和小数点

以vue的input为例,需求只能输入数字和小数点

html 复制代码
<el-input @input="money = money.replace(/[^\d|\.]/g, '')" v-model="money" />

原理:通过绑定输入事件 使用replace字符串替换方法修改绑定的值 money就是自己绑定的值

/\^\\d\|\\./g 意思是全局匹配除了数字和小数点

replace(/\^\\d\|\\./g, '') 就是除了数字和小数点其他都替换为空

.replace方法可以使用多个

html 复制代码
<el-input @input="money = money.replace(/[^\d|\.]/g, '').replace(/^00/g, '0').replace(/^\./g, '0.')" v-model="money" />

除了数字和小数点其他都替换为空 然后以00开头替换为0 以.开头变成0.

有其他需求根据正则表达式 进行修改即可

相关推荐
jay神36 分钟前
【计算机毕业设计】基于Flask+Vue的电影数据可视化与智能推荐系统
前端·vue.js·python·信息可视化·flask·毕业设计·课程设计
FreeTinker7 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_452396237 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
海兰7 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
wangruofeng8 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne8 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel9 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
小磊哥er9 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
何以解忧,唯有..9 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
小磊哥er9 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程