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

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

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

相关推荐
Mintopia4 分钟前
🌌 信任是否会成为未来的货币?
前端·人工智能·aigc
fqbqrr5 分钟前
2601C++,模块导出分类
前端·c++
倚栏听风雨10 分钟前
vscode 运用 ts 代码需要准备什么
前端
韩曙亮18 分钟前
【Web APIs】浏览器本地存储 ① ( window.sessionStorage 本地存储 | window.localStorage 本地存储 )
服务器·前端·javascript·本地存储·localstorage·sessionstorage·web apis
吃杠碰小鸡20 分钟前
前端Mac快速搭建开发环境
前端·macos
qq_5295993823 分钟前
reactnative获取经纬度 获取此地信息 @react-native-community/geolocation
javascript·react native·react.js
前端大波25 分钟前
使用webpack-bundle-analyzer 对 react 老项目进行打包优化
前端·react.js·webpack·性能优化
前端 贾公子32 分钟前
(catalog协议) == pnpm (5)
前端·javascript·react.js
JarvanMo36 分钟前
深度解析:如何彻底终结 Flutter 异步操作中的 BuildContext 崩溃?
前端
wxr061641 分钟前
部署Spring Boot项目+mysql并允许前端本地访问
前端·spring boot·mysql·持续部署