js 实现验证金额 / 限制保留两位小数-小月博客

js 实现验证金额 / 限制保留两位小数

近期在迭代版本的时候，修复之前的一个bug，就是在账单金额填写的时候虽然input的type 类型用了number，但是会遇到很多意外的情况，比如用户直接粘贴进去了汉字/拼音等等。这样子提交到后台铁定报错。所以就需要前端来做好拦截。

需求

第一：保证输入的是数字类型
第二：限制保留两位小数

实现代码如下：

<input type="text" oninput="input_money(this)" placeholder="请输入优惠金额" />

/**
 * 限制只允许输入两位小数
 */
function input_money(obj) {
    //先把非数字的都替换掉，除了数字和.
    obj.value = obj.value.replace(/[^\d.]/g, "");
    //保证只有出现一个.而没有多个.
    obj.value = obj.value.replace(/\.{2,}/g, ".");
    //必须保证第一个为数字而不是.
    obj.value = obj.value.replace(/^\./g, "");
    //保证.只出现一次，而不能出现两次以上
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    //只能输入两个小数
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
}

注意：oninput 是输入事件, 每次输入时都验证一下

个人感悟： 通过这些年的学习，接触了很多框架，Ag、Vue/ React… … ,但是我发现万丈高楼平地起都离不开JS，这才是根基。不论做什么写什么项目，学习什么新的框架，如果原生JS学习的不好的话，后期都不会走的太顺，不会理解的透彻，所以不管前端如何发展，我们都要打牢根基我们的JS基础吧。

下面给大家推荐一套我个人感觉非常不错的课程《再学JavaScript ES(6-11)全版本语法大全》直接下载