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

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

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

相关推荐
亿元程序员9 分钟前
Cocos4开源都快半年了,还有不会用官方MCP的?安排!
前端
早點睡3909 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-inappbrowser(也可以考虑WebView)
javascript·react native·react.js
北风toto11 分钟前
Vue多文件学习项目综合案例——面经基础版,黑马vue教程
javascript·vue.js·学习
奔跑的呱呱牛1 小时前
xlsx 已停止维护且存在漏洞!推荐一个可直接替代的 npm 库
前端·npm·node.js·xlsx·sheetjs
珑墨1 小时前
pnpm 与 node_modules:硬链接、软连接(符号链接)、Junction 速记
前端
浪扼飞舟1 小时前
WPF输入验证(ValidationRule)
java·javascript·wpf
freewlt1 小时前
Monorepo 架构下的前端工程化实践:pnpm + Turborepo 从入门到落地
前端·arcgis·架构
徐小夕9 小时前
我用 AI 撸了个开源"万能预览器":浏览器直接打开 Office、CAD 和 3D 模型
前端·vue.js·github
小码哥_常9 小时前
Flutter Android 延迟加载代码指南:提升应用性能的关键
前端
这是个栗子10 小时前
TypeScript(三)
前端·javascript·typescript·react