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

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

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

相关推荐
亿元程序员4 分钟前
自从有了 AI,我就再也不想拼 UI 了……
前端
数据狐(Datafox)5 分钟前
淘宝商品详情API实战:多语言代购商城自动同步数据完整方案
开发语言·前端·数据库·爬虫·json
hasty16 分钟前
HTML 已经转义,为何仍有 XSS?Sharp srcdoc 漏洞中的第二次解析
前端·html·xss
涛涛ing17 分钟前
WebMCP正式进入Origin Trial:AI Agent不再“装人”,前端交互范式正在被重写
前端
y = xⁿ22 分钟前
关于Agent智能体开发
开发语言·前端·javascript
梅孔立26 分钟前
Codex 完整教程(Node.js安装 + npm安装Codex + DeepSeek配置 + 快捷键 + 设置)
前端·npm·node.js
事圆则缓33 分钟前
Flutter 状态管理框架对比(一):先看地图,再选工具
前端·javascript·flutter
中杯可乐多加冰36 分钟前
解决方案:CEB 文件 Web 端在线预览方案,Linux部署ceb文件在线预览工具
linux·运维·前端·ceb
晚风醉蝶42 分钟前
webpack 模块提取
前端·webpack·node.js·ast·逆向分析
IMPYLH1 小时前
HTML 的 <tfoot> 元素
前端·javascript·html