Angular 反应式表单模式验证器将 $ 添加到正则表达式并破坏验证

Question

我正在尝试使用以下正则表达式验证密码：
^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,}).
请注意，没有终止 $ 字符，因为这会阻止接受有效密码。（我不确定为什么输入字段没有终止字符串）。
但是，Angular 的 Validators.pattern 添加了字符串字符的结尾。因此我的有效密码失败了。
如何防止模式验证器添加 $?
我想我可以推出自己的密码验证器，但肯定有更好的解决方案......？

编辑：应该成功的密码：

测试1234
tEst1234
tesT1234
1234测试
1234tesT
t#St1234

应该失败的密码：

测试 1234
test1234
tEst123
测试123
测试测试
12345678

验证器声明：

this.password = new FormControl('', [Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,})')]);
this.userForm.addControl('Password', this.password);

Answer 1

您可以在末尾添加一个 .*，或者甚至稍微修改模式以将前瞻性转换为消费模式：

Validators.pattern('(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}')

或者，更好的是，在使用正则表达式进行密码验证时，请遵循 principle of contrast:

Validators.pattern('(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}')

Angular 将在正则表达式模式的两端添加 ^ 和 $，因此该模式看起来像

^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}$

请注意，如果您使用 regex 文字，它不会自动添加锚点，请手动添加它们：

Validators.pattern(/^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\D*\d).{8,}$/)

对于正则表达式文字，您可以在正则表达式转义中使用单个反斜杠（/\d/ 匹配数字与字符串文字中的 "\d"）。

见regex demo

详情

^ - 字符串开头
(?=[^A-Z]*[A-Z]) - 至少 1 个大写 ASCII 字母
(?=[^a-z]*[a-z]) - 至少 1 个小写 ASCII 字母
(?=[^0-9]*[0-9]) - 至少 1 个 ASCII 数字
.{8,} - 任意 8 个或更多字符（换行符除外）
$ - 字符串结尾。

Angular 反应式表单模式验证器将 $ 添加到正则表达式并破坏验证

Angular reactive forms pattern validator adding $ to regex and breaking validation

regex

angular

angular-reactive-forms