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

昨天写小程序项目，在输入金额的框上也只是简单的为 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(".") == 0) {
            money.value = money.value.replace(/[^$#$]/g, "0."); //将. 变为0.  ！！！！
            money.value = money.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        }
    })

防止多输入更改新内容
金额输入框的规则----微信小程序+js+jqeury
还有这里注意一下（仿微信金额输入框的点）

//小程序：
  writePri: function(e) {
    e.detail.value = e.detail.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    e.detail.value = e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

    if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") {
      e.detail.value = parseFloat(e.detail.value);
    } else if (e.detail.value.indexOf(".") == 0) {
      console.log(1111111111111111111111111111)
      e.detail.value = e.detail.value.replace(/[^$#$]/g, "0."); 
      e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
    }
    this.setData({
      price: e.detail.value
    })
  },

//jquery
  $('#money').on('keyup',function () {
        var val = $(this).val();
        $(this).val($(this).val().replace(".","$#$").replace(/\./g, "").replace("$#$", ".").replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'));
        if (val.indexOf(".") < 0 && val!= "") {
                $(this).val(parseFloat($(this).val()));
                } else if (val.indexOf(".") == 0) {
                    $(this).val($(this).val().replace(/[^$#$]/g, "0.")) ;
                    $(this).val( $(this).val().replace(/\.{2,}/g, "."));
                }
    })

其实上述并不是很完善，而且有多余，在此先做个记录。

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

相关推荐