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)全版本语法大全 》直接下载

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏