input框限制输入数字，并限制输入小数后2两位。

最新推荐文章于 2024-05-27 09:14:17 发布

zx&it

最新推荐文章于 2024-05-27 09:14:17 发布

阅读量4.4k

点赞数

分类专栏： js技巧 vue技巧数据处理文章标签：正则表达式 javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_40639028/article/details/127127436

版权

js技巧同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

vue技巧

13 篇文章 0 订阅

订阅专栏

数据处理

9 篇文章 0 订阅

订阅专栏

思路：1、使用input输入事件；2、使用正则表达式结合replace替换输入的非数字。

代码如下：

html

<el-input v-model="formModal.value"  @input="limitInput($event,'value')"></el-input>

js：

limitInput(value, name) {
    this.formModal[name] =
        ("" + value) // 第一步：转成字符串
        .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
},