Vue + elementUi 限制el-input输入的数为整数或小数

<el-input
	v-model="form.test"
	oninput="value=value.replace(/[^0-9.]/g,'').replace(/^\./g, '').replace('.', 'dollar#dollar').replace(/\./g, '').replace('dollar#dollar', '.');"
	size="mini"/>

说下几个replace的作用,
1、第一个replace,^不放在开头表示取否的意思,搭配[]使用,所以这是限制只能输入0-9和小数点,其他都会被替换为空,效果也就是删除掉;

2、第二个replace限制不能在开头输入小数点;

3、第三、四、五个replace将小数点替换成dollar#dollar,再换回来,是利用了replace只替换识别到的第一个匹配值的特性,例如:在3.45后面再输入一个小数点变成3.45. ,那么第三个replace会把字符串替换为3dollar#dollar45. ,第四个将小数点替换掉,变成3dollar#dollar45,第五个再换回来,变成3.45。

dollar#dollar可以是任意字符串,无所谓。

若要限制小数位数,可以用toFixed方法。

例如:this.form.test =Number(this.form.test ).toFixed(4);
这样就是限制4位小数,可以随便填,填2就是限制2位;toFixed方法采用的是四舍六入五成双的规则,不是四舍五入,该规则请自行百度,若要改为四舍五入,需自行定义四舍五入方法后,在其内部用toFixed方法。

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值