javascript - 使用 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 匹配的值)。

查看实际效果 here .