使用 JavaScript 在表单中舍入用户输入

Question

我正在寻找一个正则表达式和一个 JavaScript 函数，它将用户刚刚输入的内容向上舍入到最多 2 位小数，用户可以输入任何数字和点，例如1, 2.3490, 23 并且当用户点击离开该字段时它应该更改为 1.00, 2.35, 23.00。到目前为止，我已经想出了这个：

这是我的正则表达式：

var pPrice = /^\d*\.\d*$/;

我的 JavaScript 函数：

// Function to validate price
   function validateProductPrice(){

    var priceRound = document.getElementById("productprice").value;
    var priceHack = Math.round(priceRound*100)/100;

    if (document.myForm.priceHack.value.trim().search(pPrice) == -1) {

        alert("WRONG INPUT FOR PRICE!");
        document.getElementById("priceERROR").style.display = "none";

    } else {
        document.getElementById("priceERROR").innerHTML = "CORRECT.";
        document.getElementById("priceERROR").style.display = "block";
      }
    }

我的这个字段的 html：

<div>    
<input type="text" class="productprice" placeholder="Price" name="productprice" onblur="return validateProductPrice() ">
<span id="priceERROR"></span>
  <p class="price-help">Price e.g. if $1 please enter 1.00.</p>
</div>

我遇到了一些麻烦，因为它真的不起作用，我不知道为什么！

感谢大家的帮助！

编辑

我通过修复我在以下答案中得到的正则表达式并意识到我的输入没有 ID 来修复它，所以我正在调用一个空值，现在我的代码是：

我的正则表达式是：

var pPrice = /^((?:\d+(?:\.\d*)?)|(?:\.\d+))$/

我的 JavaScript 是：

function validateProductPrice(){

    var priceRound = document.getElementById("productprice").value;
    var priceHack = Math.round(priceRound*100)/100;

    if (document.myForm.productprice.value.trim().search(pPrice) == -1) {

        alert("WRONG INPUT FOR PRICE!");
        document.getElementById("priceERROR").style.display = "none";

    } else {

        document.getElementById("productprice").value = priceHack;
        document.getElementById("priceERROR").innerHTML = "CORRECT.";
        document.getElementById("priceERROR").style.display = "block";

    }

我的html是：

<div>    
<input id="productprice" type="text" class="productprice" placeholder="Price" name="productprice" onblur="return validateProductPrice()" >
<span id="priceERROR"></span>
  <p class="price-help">Price e.g. if $1 please enter 1.00.</p>
</div>  

现在它还会覆盖用户输入的任何内容，如果他输入 2.336678，则只显示 2.34，这就是我要找的！

感谢大家帮助我解决这个问题！希望我的编辑也能帮助人们！！

Answer 1

正则表达式

让我们从您的 RegEx 开始。您所拥有的将匹配具有任意小数位数的十进制数字，以及其他内容。

^((?:\d+(?:\.\d*)?)|(?:\.\d+))$

说明

首先我们声明，如果只有一个没有小数位的整数，那很好。但是，我们也允许使用简写 .8 代替 0.8。然后我们匹配所有小数位并捕获数字。 Here 是对 RegEx 的测试。

JavaScript

我怀疑您想将更新后的值写入输入字段，但您从不这样做。我更新了代码来做到这一点，并在每次用户输入内容时更新以提供更好的反馈。

var input = document.getElementById("price"),
    priceRegex = /^((?:\d+(?:\.\d*)?)|(?:\.\d+))$/,
    lastGood = "";

input.onkeyup = function(e) {
    if (input.value === ".") {
         lastGood = ".";
    }
    else if (priceRegex.test(price)) {
        var price = parseFloat(input.value);
        console.log("good");
        var newPrice = "" + (Math.round(price * 100) / 100) + (input.value.indexOf(".") === input.value.length -1 ? "." : "");
        input.value = newPrice;
        lastGood = newPrice;
    } else {
        console.log("bad");
        input.value = lastGood;
    }
}

说明

每次用户输入一个字符，上面的函数就会被调用。首先它检查用户是否刚刚输入了.，这是一种特殊情况，因为它不是一个有效的数字，但可能是一个数字的开头。如果文本与上面解释的 RegEx 匹配。如果是，则执行舍入并将其设置为新值。如果它与 RegEx 不匹配，则说明用户做错了，我们将输入字段重置为我们认为正确的最后一个值（与 RegEx 匹配的最后一个值）。

看到它在行动here。

Answer 2

希望这是你需要的

var pPrice = /^\d*\.{0,1}\d*$/;

// Function to validate price
   function validateProductPrice(){

    var priceRound = document.getElementById("productprice").value;
    

    if (priceRound.trim().search(pPrice) == -1) {

        alert("WRONG INPUT FOR PRICE!");
        document.getElementById("priceERROR").style.display = "none";

    } else {  
      var priceHack = parseFloat(priceRound).toFixed(2);
       document.getElementById("productprice").value=priceHack;
        document.getElementById("priceERROR").innerHTML = "CORRECT.";
        document.getElementById("priceERROR").style.display = "block";
      }
    }

<div>    
<input type="text" class="productprice" placeholder="Price" name="productprice" id="productprice" onblur="return validateProductPrice() ">
<span id="priceERROR"></span>
  <p class="price-help">Price e.g. if $1 please enter 1.00.</p>
</div>

Answer 3

希望以下有所帮助。

我使用 jQuery 进行模糊事件和设置值，但可以使用 JS 轻松设置。

http://codepen.io/praveenvijayan/pen/doNKNz

 $('#txt').on('blur', function(){

    var val = $(this).val().split(','),
    tmp = [],
    res;
 val.map(function(val, i){
  if(typeof +val){
    res = Math.round(val * 100)/100
    tmp.push(res % 1 ? res : res + '.00');
  }
});

$(this).val(tmp.join(' ,'));

})