Question

在我的Angular App中，我试图在输入字段（例如

）上设置验证

它只能接受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})$"

它可以验证点后两位数，但不能验证点前两位数，因为它接受333.33（这是错误的）

我也尝试过

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

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

Answer 1

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

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

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

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

Regex demo

说明

^断言字符串的开头
\d{1,2}匹配一个数字1或2次
(?: Non capturing组
- \.\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));
});

Answer 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>

正则表达式接受格式00.00中的数字

2 个答案: