使用 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

.字符在正则表达式中具有特殊含义，因此需要转义。

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

这匹配 123.45、123.4、123 和 .2、.24 但不匹配空字符串 123.、123.456

Answer 2

. 在 RegEx 中的意思是：任何字符，你必须在它前面加上一个反斜杠。 \.

这样会更好：

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

我包含的部分：

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

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

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

编辑：

如果是用于输入的实时验证，为什么不截取关键事件并测试其有效性（通过在内存中创建字符串）或删除字段中的最后一个字符？

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

您可以使用 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 6

正则表达式

/^\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 来测试正则表达式！

Answer 7

如果我们需要验证文本框中的数字值，我们希望防止多个小数（例如 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;
 }