Vue + elementUi 限制el-input输入的数为整数或小数
<el-inputv-model=""oninput="value=value.replace(/[^0-9.]/g,'').replace(/^\./g, '').replace(/\.{2,}/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');"class="edit-input"size="mini"@b
·
<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方法。
更多推荐
已为社区贡献1条内容
所有评论(0)