使用十进制精度和比例验证输入

Question

我正在尝试创建一个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

- ughai

---

检查按键并尝试重新实现用户界面通常非常困难，并且在不同的浏览器上无法正常工作。考虑只检查实际值并从那里开始。 - RobG

Answer 1

考虑使用正则表达式，例如：

/^(\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位前导数字（除非我误解了问题）。

- RobG

---

谢谢你的回答。我在不同的输入字段中使用这个函数，它们对精度和比例有不同的要求。这就是为什么我的函数有这些参数。至于“小数点前的零”，这是因为.25是一个有效的值，应该显示为0.25。 - ughai