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

以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.

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

相关推荐
sibylyue13 小时前
工作流表单和流程设计前端
开发语言·javascript·开源
一个游离的指针13 小时前
JS中的对象的相关概念
开发语言·javascript·原型模式
霹雳桃13 小时前
移动端 H5 折叠屏适配实战:为什么 max-width 没用,min(vw, px) 才是正解
前端·前端框架
mONESY13 小时前
DeepSeek-R1 WebGPU(六):浏览器本地跑推理的完整实现
javascript
Goodbye13 小时前
useContext 上下文与自定义 Hooks:跨层级数据共享的优雅方案
前端
新时代牛马13 小时前
Vue.js 响应式原理详解
前端·javascript·vue.js
jaysee-sjc13 小时前
【JavaWeb】Tlias智能学习辅助系统|后端Web实战(登录认证)
java·开发语言·前端·学习·mybatis
触底反弹13 小时前
🔥 从 SPA 到 SSR:5 个核心差异搞懂 Next.js 为什么是前端 SEO 的终极方案
前端·react.js·next.js
岁月留痕16813 小时前
11 实战项目一:搭建“一言”项目骨架
前端