regex - Angular react 形式模式验证器将 $ 添加到正则表达式并破坏验证

Question

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

编辑: 应该成功的密码:

• 测试1234
• tEst1234
• 测试T1234
• 1234测试
• 1234tes
• t#St1234

应该失败的密码:

• 测试 1234
• 测试1234
• 测试123
• 测试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,}$

请注意，如果您使用正则表达式，它不会自动添加 anchor ，请手动添加:

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 个或更多字符(换行符除外)
• $ - 字符串结尾。