js價格金額輸入限制-(無精度、科學計數法問題)

js價格限制

  • 不會出現精度問題
  • 不會有科學計數法
  • input輸入後有千分位符
  • input輸入時限制只能輸入特定範圍數據

1、基本input都是進行字符串驗證限制,因爲轉金額驗證會更麻煩,處理大數值的問題
2、超過16位的數值都會有精度問題,因爲計算機的進制是二進制,進位是按二進制,不是十進制的四捨五入,同時js支持的數值位數有限(引入BigNumber處理超過16位的數值)

bigNumber相關用法
https://github.com/MikeMcl/bignumber.js/

/**
 * 價格格式限制
 *     必須加格式限制屬性 n-format
 *    e.g:
 *      11位整數,5位小數
 *      <input class="form-control price" n-format="11,5"/>
 */
// reg = '^(0|[1-9]\\d{0'+','+f[0]+'}|0\\.\\d{1,'+f[1]+'}|[1-9]\\d{0,'+f[0]+'}\\.\\d{1,'+f[1]+'})$';
$('.price').blur(function (el) {
    var target = el.currentTarget;
    var value = el.currentTarget.value;

    var f = $(target).attr("n-format").split(',');

    $(target).val(toStr(value, Number(f[1])))
})
$('.price').focus(function (el) {
    var target = el.currentTarget;
    var value = el.currentTarget.value;

    $(target).val(value.replace(/,/g, ''))
})
$('.price').bind('input propertychange',function (el) {
    var target = el.currentTarget;
    var value = el.currentTarget.value;

    var f = $(target).attr("n-format").split(',');
    var l2 = Number(f[1]);

    value = value.replace(/[\u4e00-\u9fa5]+/g, ""); //驗證非漢字
    value = value.replace(/[^\d.]/g, ""); //清除"數字"和"."以外的字符
    value = value.replace(/^\./g, ""); //驗證第一個字符是數字而不是
    value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留第一個小數點, 清除多餘的
    value = value.replace(RegExp('^(0)*(\\d+)\\.(\\d{'+l2+'}).*$'), '$2.$3'); //只能輸入5個小數
	value = value.replace(/^(0{1,})(\d{1,}.*)/,'$2'); // 去除開頭的多餘的0
    $(target).val(value);
})
$('.price').keyup(function (el) {
    var target = el.currentTarget;
    var value = el.currentTarget.value;

    var f = $(target).attr("n-format").split(',');
    var l1 = Number(f[0]);

    if (value.toString().indexOf('.') != -1){
        if (value.toString().substring(0,value.toString().indexOf('.')+1).length > l1){
            value = value.toString().substring(0,value.toString().indexOf('.')+1).slice(0,l1+1) + value.toString().substring(value.toString().indexOf('.')+1,value.toString().length);
        }
    }else {
        value=value.slice(0,l1)
    }

    $(target).val(value);

})

/**
 * 數量格式限制 : 默認限制8位
 */
$('.num').blur(function (el) {
    var target = el.currentTarget;
    var value = el.currentTarget.value;

    var reg = /^(0|[1-9]\d{0,7})$/;
    if (!value.match(reg)) {
        value = '0';
    }

    $(target).val((value))
})
$('.num').bind('input propertychange',function (el) {
    var target = el.currentTarget;
    var value = el.currentTarget.value;

    value = value.replace(/[\u4e00-\u9fa5]+/g, ""); //驗證非漢字
    value = value.replace(/[^\d.]/g, ""); //清除"數字"和"."以外的字符
    value = value.replace(/^\./g, ""); //驗證第一個字符是數字而不是
    value = value.replace(".", ''); //只保留第一個小數點, 清除多餘的
    value = value.replace(/^(0|[1-9]\d{0,7}).*$/, '$1'); //只能輸入8位整數
    value = value.replace(/^(0{1,})(\d{1,}.*)/,'$2'); // 去除開頭的多餘的0

    $(target).val(value);
})


/**
 * 將數字保留5位小數、將整數位使用千分位
 * @param str
 * @returns {string}
 */
function toStr(str, decimal) {
    str = String(str);
    var c1 = str.split(".");

    if($.trim(c1[0]) == ''){
        var temp = '0.';
        for (var i = 0; i < decimal; i++) {
            temp+='0'
        }
        return temp;
    }

    if (c1.length > 1 && c1[1].length > 5) {
        str = str.substr(0, c1[0].length + 6);
    }

    var c2 = str.split(".");

    str = segmentation(c2[0]);
    if (c2.length > 1) {
        str = str + "." + c2[1];
    }

    var c3 = str.split(".");
    if (c3.length > 1) {
        var i = decimal - c3[1].length;
        for (var j = 0; j < i; j++) {
            str += "0";
        }
    } else {
        str += ".";
        for (var i = 0; i < decimal; i++) {
            str+='0'
        }

    }
    return  str;
}

/**
 * 千分
 * @param str
 * @returns {*}
 */
function segmentation(str) {

    var length = str.length;
    var result = "";
    var a = length % 3;
    var b = Math.floor(length / 3);

    if (a != 0) {
        result += str.substring(0, a);
        if (b != 0) {
            result += ",";
        }
    }

    for (var i = 1; i <= b; i++) {
        result += str.substring(a + (i - 1) * 3, a + i * 3);
        if (i != b) {
            result += ",";
        }
    }
    return result;
}

/**
 * 千分位轉數字格式
 * @param str
 * @returns {string|string}
 */
function toNum(str) {
    return String(str).replace(/,/g, '');
}

/**
 * 大數據-加
 * @param n1
 * @param n2
 * @returns {string | *}
 */
function bigPlus(n1, n2) {
    n1 = toNum(n1);
    n2 = toNum(n2);
    return new BigNumber(n1).plus(new BigNumber(n2)).toFixed(5)
}

/**
 * 大數據-減
 */
function bigMinus(n1, n2) {
    n1 = toNum(n1);
    n2 = toNum(n2);
    return new BigNumber(n1).minus(new BigNumber(n2)).toFixed(5)
}

/**
 * 大數據-乘
 */
function bigMultipliedBy(n1, n2) {
    n1 = toNum(n1);
    n2 = toNum(n2);
    return new BigNumber(n1).multipliedBy(new BigNumber(n2)).toFixed(5)
}

/**
 * 大數據-除
 */
function bigDividedBy(n1, n2) {
    n1 = toNum(n1);
    n2 = toNum(n2);
    return new BigNumber(n1).dividedBy(new BigNumber(n2)).toFixed(5)
}

其他金額、數值相關js庫(Numeral.js、Math.js、currencyFormatter.js)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章