金额输入框的规则----微信小程序+js+jqeury

最新推荐文章于 2024-10-07 09:11:21 发布

婆婆丁的成长记

最新推荐文章于 2024-10-07 09:11:21 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签：金额规则金额输入框仿微信 js、jq、小程序

本文链接：https://blog.youkuaiyun.com/weixin_42855542/article/details/86537349

在微信小程序项目中，为实现金额输入框的严谨验证，原设置的`type='number'`和限制条件不足以防止用户乱输数字。为解决此问题，需要补充更完善的防止多输入的解决方案，并实现仿微信金额输入框的点显示功能。这是一个关于js、jq、小程序中金额规则和输入框控制的实践记录。

昨天写小程序项目，在输入金额的框上也只是简单的为 input 设置了"type=‘number’";
并设置了一定的限制

money.value = money.value.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");//只允许存在一个点
money.value = money.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数

可惜猝不及防的不足——验收：“来一个手贱的人，乱输数字，乱点怎么办？”

00000015.21——虽然结果仍是15.21，但是确实不好看，偷懒是过了点。

所以在此补充一波（三者换汤不换药）：

//js（原生）
	var money = document.getElementById('money');
    money.addEventListener('keyup',function () {
        money.value = money.value.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");//只允许存在一个点
        money.value = money.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
        //需要注意$3处（‘\d\d).’）的那个点，见下图
        if (money.value.indexOf(".") < 0 && money.value != "") { //此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            money.value = parseFloat(money.value);   //parseFloat：字符串中第一个小数点是有效的，而第二个小数点就是无效的了
        } else if (money.value.indexOf