js正则保留一位小数或者两位小数

前端输入验证：实现数字及小数点过滤

最新推荐文章于 2024-03-24 21:34:25 发布

原创最新推荐文章于 2024-03-24 21:34:25 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue.js #正则表达式 #javascript #elementui

本文介绍了如何使用正则表达式在前端进行数字和小数点的输入验证，确保用户只能输入有效的数值，包括清除非数字字符、限制小数点数量和位置，以及控制小数位数等。这种方法对于构建用户友好的输入界面至关重要。

<el-input v-model="number"
          @keyup.native="keyUp"
          placeholder=""></el-input>

keyUp(e) {
      e.target.value = e.target.value
        .replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
        .replace(/^\./g, ""); //验证第一个字符是数字而不是其它
        .replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        .replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        .replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
    },
    //.replace(/^0/g, "") //清除开头为0的情况
    //.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数