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

时间:2025-01-22 07:34:18

以vue的input为例,需求只能输入数字和小数点

<el-input @input="money = (/[^\d|\.]/g, '')" v-model="money" />

只能输入数字并且不能以0开头

 <el-input v-model="customNum" @input="customNum = (/\D/g, '').replace(/^0(\S)/g, '$1')" />

原理:通过绑定输入事件 使用replace字符串替换方法修改绑定的值  money就是自己绑定的值

/[^\d|\.]/g    意思是全局匹配除了数字和小数点

replace(/[^\d|\.]/g, '')  就是除了数字和小数点其他都替换为空

.replace方法可以使用多个 

<el-input @input="money = (/[^\d|\.]/g, '').replace(/^00/g, '0').replace(/^\./g, '0.')" v-model="money" />

除了数字和小数点其他都替换为空  然后以00开头替换为0   以.开头变成0.

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

正则表达式-****博客