使用 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  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  please enter 1.00.</p>
</div>

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

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

Answer 1

希望这就是您所需要的

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  please enter 1.00.</p>
</div>

Answer 2

正则表达式

让我们从您的 RegEx 开始。你所拥有的将匹配具有任意小数位数的小数，但也可以匹配其他东西。

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

说明

首先我们声明，如果只有一个没有小数位的整数就可以了。但是，我们也允许 0.8 的简写形式 .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 匹配的值）。

查看实际效果 here。

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(' ,'));

})

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

Rounding user input in form using JavaScript

javascript

regex

jquery

rounding

正则表达式

说明

JavaScript

说明