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

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

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

相关推荐
用户298698530144 分钟前
React 项目中灵活管理 Excel 工作表:增删与移动
javascript·react.js·excel
weedsfly6 分钟前
从类继承到自定义 Hook:模板方法模式的前端演进
前端·javascript·面试
Quz7 分钟前
QML 线性布局:Row/RowLayout 与 Column/ColumnLayout
前端·qt
你为她披上外套时我正站在窗外11 分钟前
用 Rust + WebAssembly 写了个字幕工具,文件全程不离开浏览器
前端
帅帅哥的兜兜11 分钟前
AI模型初了解
前端
bonechips12 分钟前
React + WebGPU(二):合成事件与进度条组件封装
前端·react.js
我是大卫15 分钟前
【图】React源码解析-从底层数据结构、渲染调度到闭包原理深挖useRef的核心机制
前端·react.js·源码
光影少年21 分钟前
RN导航与路由
前端·react native·react.js
smallcelebration32 分钟前
139 @vueuse/core依赖介绍使用
前端·javascript·vue.js
蒜苔肉丝43 分钟前
Vue3 动态表单:模块复用 + 动态增删行 + 数据回显
前端·javascript·vue.js