js限制输入框输入两位小数

原文链接：https://dsx2016.com/?p=1729

公众号：大师兄2016

管理端需求

查询条件金额显示输入2位小数

不能输入中文,英文和特殊符号,只能输入数字和点,且没有00.1和0.1.2.3之类的数据

前端高频的场景之一

字符格式化方法

strFormatNum(val) {
    //清除“数字”和“.”以外的字符
    val = val.replace(/[^\d.]/g, '') 
    //只保留第一个. 清除多余的
    val = val.replace(/\.{2,}/g, '.') 
    val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
    //只能输入两个小数
    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') 
    if (val.indexOf('.') < 0 && val != '') {
        //如果没有小数点，首位不能为类似于 01、02的金额
        val = parseFloat(val)
    }
    return val
},

监听输入框变化

此处使用的是element ui

<el-input v-model="queryData.amount.start" @input="changeStart"></el-input>

处理输入框

这里的延时30ms是为了输入框的数据处理预留时间,以及vue渲染回显的处理

一般30ms-100ms较为合适

changeStart(value) {
    console.log(`监听输入框的改变 start`, value)
    setTimeout(() => {
        this.queryData.amount.start = this.strFormatNum(value)
    }, 30)
},

END.