Angular 5 Validators.pattern数字正则验证问题求助

我之前也踩过Angular Validators.pattern的坑！它和我们平时用的正则有点不一样——默认会自动给你的正则表达式加上起始符^和结束符$，也就是说整个输入字符串必须完全匹配正则规则，不能有任何多余内容，这也是很多常规正则失效的原因。下面针对你的两个需求分别给出可行的解决方案：

1. 仅允许正负整数的验证规则 #

要匹配可选负号+至少一位数字，且没有小数部分，你可以直接用以下两种写法：

正则字面量形式 #

Validators.pattern(/^-?\d+$/)

字符串形式（注意转义反斜杠） #

Validators.pattern("^-?\\d+$")

规则解释：

• -?：匹配可选的负号，同时允许正整数和负整数
• \d+：匹配至少一位数字（避免空输入或仅负号的情况）
• ^和$：确保整个输入完全符合规则，直接拒绝123a、-45b这类含字母的内容

2. 允许正负数字且最多两位小数的验证规则 #

这个规则要覆盖整数、一位小数、两位小数的情况，同时拒绝多余小数位和字母，对应的写法如下：

正则字面量形式 #

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

字符串形式 #

Validators.pattern("^-?\\d+(\\.\\d{1,2})?$")

规则解释：

• -?：可选负号，支持正负数字
• \d+：至少一位整数部分，确保不会出现.12或-.3这类无整数的情况（如果需要支持这种场景，可以把\d+改成\d*）
• (\.\d{1,2})?：可选的小数部分，其中\.匹配小数点，\d{1,2}限制小数位为1到2位，整个括号加?表示小数部分可有可无
• 同样通过^和$确保输入完全匹配，拒绝1.234（三位小数）、-56x（含字母）这类不符合要求的内容

小提示：如果用字符串形式写正则，一定要记得转义反斜杠（比如\d要写成\\d），否则字符串会把\解析成转义字符，导致正则规则失效。

内容的提问来源于stack exchange，提问作者Matt