0

在我的 Angular 应用程序中，我试图在输入字段上设置验证，例如

它应该只接受 2 位数字或浮点数，在点之后和点之前也有 2 位数字

例子

接受值

3, 33, 33.3, 33.33

最大值可以是 99.99

不接受

333 33.333 3.333 333.33

目前我正在使用

pattern="[+]?((\d{1,2})+(?:[\.][0-9]{0,2})?|\.[0-9]{0,2})$"

它在点之后验证 2 位数字，但在点之前无法验证两位数字，因为它接受 333.33（这是错误的）

我也试过

pattern="[+]?(([0-9])+(?:[\.][0-9]{0,2})?|\.[0-9]{0,2})$"

但是同样的事情发生了，它不验证点之前的两位数

4

2 回答 2

4

此模式(\d{1,2})+将匹配 1 - 2 位数字，并将重复一次或多次。

类似的模式\.[0-9]{0,2}也将只匹配一个点，因为数字将匹配 0 - 2 次。

您可以使用锚来断言字符串的开头^和结尾$。将 1 或 2 位数字与匹配点和 1 或 2 位数字的可选部分匹配：

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

正则表达式演示

解释

  • ^断言字符串的开头
  • \d{1,2}匹配一个数字 1 或 2 次
  • (?: 非捕获组
    • \.\d{1,2}从字面上匹配一个点和 1 或 2 位数字
  • )?关闭非捕获组并使其可选
  • $断言字符串的结尾

如果您想在开头匹配可选加号，则正则表达式的开头可能是^\+?

let pattern = /^\d{1,2}(?:\.\d{1,2})?$/;
let strs = [
  "99",
  "3",
  "33",
  "33.3",
  "33.33",
  "333",
  "33.333",
  "3.333",
  "333.33"
];

strs.forEach((s) => {
  console.log(s + " ==> " + pattern.test(s));
});

于 2018-10-15T06:37:53.450 回答
2

在我看来，正则表达式可以简化。你真的想要一个可选的前导“+”吗？由于您的示例未包含它，因此我将其遗漏了，如果您愿意，可以将其放回原处。

function testValue(){
  // Optional leading +
  // var re = /^\+?\d{1,2}(\.\d{1,2})?$/;
  // No leading +
  var re = /^\d{1,2}(\.\d{1,2})?$/;
  console.log(re.test(this.value));
}


window.onload = function(){
  document.querySelector('input').addEventListener('input',testValue,false);
}
Enter number: <input>

于 2018-10-15T06:40:30.183 回答