金额输入框的规则----微信小程序+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_第1张图片
还有这里注意一下(仿微信金额输入框的点)
金额输入框的规则----微信小程序+js+jqeury_第2张图片

//小程序:
  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)