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

Question

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

编辑： 应该成功的密码：

• 测试1234
• tEst1234
• testT1234
• 1234测试
• 1234testT
• t#St1234

应该失败的密码：

• TEST1234
• 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 个或更多字符（换行符除外）
• $ - 字符串结束。