使用RegEx的JavaScript小数位限制

Question

我对文本框进行了一些客户端验证，该文本框只允许最多两位小数的数字而没有其他输入。

此脚本仅作为输入数值的基础，但需要进行调整以使其可以采用小数点后跟最多两位小数。

我已经尝试了/[^\d].\d{0,2}这样的内容，但是替换调用不起作用，我不知道该怎么做。

代码

<script type="text/JavaScript">
  function valid(f) {
    if (!/^\d*$/.test(f.value)) {
      f.value = f.value.replace(/[^\d]/g,"");
      alert("Invalid number");
    }
  }
</script>

---

注意

我需要匹配一个空字符串。如果提供了空字符串并且提交了表单，则该值默认为零。

Answer 1

。字符在RegEx中具有特殊含义，因此需要转义。

/^(?:\d*\.\d{1,2}|\d+)$/

匹配123.45,123.4,123和.2，.24但不匹配emtpy字符串，123。，123.456

Answer 2

.表示在RegEx：任何角色，你必须在它前面放一个反斜杠。 \.

这会更好：

/^\d+(\.\d{0,2})?$/

我包含的部分：

• 点前面至少需要1个数字。如果您不想这样做，请将+替换为*，但也会匹配空字符串。
• 如果您有小数值，则需要前面的点。
• 数字后面应该没有任何内容，$代表输入结束。

对于替换部分，您还应该包括点

f.value.replace(/[^\d\.]/g, "")

修改

如果用于输入的实时验证，为什么不直接拦截keyevents并测试它们的有效性（通过在内存中创建字符串）或只删除字段中的最后一个字符？

Answer 3

你真的想用正则表达式做这个吗？

function valid(f) {
    if(isNaN(f)){return false;}
    return 100 * f == parseInt(100*f,10);
}

Answer 4

gs：这非常接近，但行

f.value = f.value.replace(/[^\d\.]/g, "");

实际上似乎不起作用。事实上，由于某种原因，我失去了文本框的焦点。虽然也许这是我的代码;）

Answer 5

如果我们需要在文本框中验证我们想要防止多个小数的数值（例如2..3，.2等）

以下是Javascript函数。

 if (MoreThanOnePoint(document.getElementById("txtNoofHrs").value) == false) {
     alert("Please enter one decimal only");
     document.forms[0].txtNoofHrs.focus();
     return false;
 }

 function MoreThanOnePoint(strString) {
     var strChar;
     var blnResult = true;
     var varcount = 0;

     for (i = 0; i < strString.length && blnResult == true; i++) {

         if (strString.charAt(i) == ".") {
             varcount++;
             if (varcount > 1) {
                 //alert("Please enter one decimal only");
                 blnResult = false;
             }
         }
     }
     return blnResult;
 }

Answer 6

您可以使用javascript函数代替正则表达式

function IsValid(value) {
    var split = value.split('.');

    if (split.length != 2) {
        return false;
    }
    else if (split[1].length > 2 || !Number(split[1])) {
        return false;
    }
    else if (!(split[0] == '' || split[0] == '0')) {
        return false;
    }

    return true;
}

Answer 7

正则表达式

/^\d+(\.\d{1,2})?$/

的JavaScript

function valid(f) {
  if(!f.value) { // Test if text field is empty
    f.value = 0; // Initialize value to 0
    console.log("Valid number"); // Let user know input is OK
  } else if (!/^\d+(\.\d{1,2})?$/.test(f.value)) { // Test regex
    f.value = ""; // Empty the text box
    console.error("invalid number"); // Let user know input is not OK
  } else {
    console.log("Valid number"); // Let user know input is OK
  }
}

document.getElementById("testbutton").addEventListener( // Add event listener to button
  "click",
  valid.bind( // Bind the text field to the `value` function
    this, 
    document.getElementById("testfield")
  )
);

<input id="testfield" value="15.1" />
<button id="testbutton">Test expression</button>

说明

1. / /：表达式的开头和结尾
2. ^：以下内容应该在您正在测试的字符串的开头
3. \d+：应该至少有一位数字
4. ( )?：此部分是可选的
5. \.：这里有一个点
6. \d{1,2}：此处应该有一到五位数字
7. $：无论如何，这应该是您正在测试的字符串的末尾

提示

您可以使用regexr.com或regex101.com直接在浏览器中测试正则表达式！