javascript - 使用十进制精度和小数位数验证输入

标签 javascript jquery decimal jquery-1.9

我正在尝试创建一个 javascript 函数,该函数在 input 上的 keypress 事件上调用,它执行以下操作:

  • 输入应该是格式为 (5,2) => (XXXXX.YY) 的有效十进制数,对于函数而言是可变的。如果用户添加任何不符合上述格式的值,则输入将受到限制。
  • 如果现有输入以 开头。 自动将 0 附加到开头

HTML

<input type="text" onkeypress="return checkDecimal(event, this, 5, 2);"  id="price2" value="27.15">

Javascript

function checkDecimal(evt, item, lenBeforeDecimal, lenAfterDecimal) {
    var charCode = evt.which;

    var trimmed = $(item).val().replace(/\b^0+/g, "");
    if(checkStartsWith(trimmed, '.') == true){
        trimmed = '0' + trimmed;
    }

    //Allow following keys
    //8 = Backspace, 9 = Tab
    if(charCode == 8 || charCode == 9){
        return true;
    }

    //Only a single '.' is to be allowed
    if(charCode == 46){
        var dotOccurrences = (trimmed.match(/\./g) || []).length;

        if(dotOccurrences != undefined && dotOccurrences == 1){
            return false;
        }else{
            return true;
        }
    }

    if (charCode > 31 && ((charCode < 48) || (charCode > 57))) {
        return false;
    }
    if ($(item).val() != trimmed){
        $(item).val(trimmed);}


    //Check the start and end length
    if(trimmed.indexOf('.') == -1){
        if(trimmed.length >= parseInt(lenBeforeDecimal)){
            return false;
        }
    }else{
        var inputArr = trimmed.split(".");
        if(inputArr[0].length > parseInt(lenBeforeDecimal) || inputArr[1].length >= parseInt(lenAfterDecimal)){
            return false;
        }
    }

    return true;
}
function checkStartsWith(str, prefix){
    return str.indexOf(prefix) === 0;
}

问题

  • 如果用户输入 12345.9 然后将插入符位置移动到 5 之后,用户可以在小数点前添加另一个数字 123456.9 这应该不允许。
  • 如果用户输入 1.9,然后删除 1 并添加 5,则在末尾添加 5 并且输入的值变为 0.95 而不是 5.9

JS Fiddle

最佳答案

考虑使用如下正则表达式:

/^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;

它允许包括您要求的格式在内的所有内容,但如果数字部分超过 5 位或小数部分超过 2 位,则返回 false,例如:

<input type="text" onkeyup="check(this.value)"><span id="er"></span>

<script>

function check(v) {
  var re = /^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
  document.getElementById('er').innerHTML = re.test(v);
}

</script>

您需要对最终值进行单独验证,例如

/^\d{5}\.\d{2}$/.test(value);

确保它是所需的格式。

我不明白在“.”前添加前导零的要求。因为无论如何用户都必须输入 5 个前导数字(除非我误解了这个问题)。

关于javascript - 使用十进制精度和小数位数验证输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30935544/

相关文章:

MySQL在插入数据库时​​更改decimal(19, 2)的值

c# - 确定小数是否可以存储为 int32

javascript - 触发父div的click事件

javascript - 向 bootstrap 下拉列表添加滑动效果

jquery - 为什么动画对我的下一个按钮的前几个 'selections' 不起作用?

php - 当我直接输入数字时 decbin 有效,但当我从数据库中提取它时则无效

javascript - Brightcove 视频对移动设备上的方向变化没有响应

javascript:正则表达式匹配未包含在自定义标签中的单词

javascript - 事件中的异步调用确认对话框

jquery - 如何应用多个 jQuery UI 主题