时间戳

首页 > 解决方案 > Angular 响应式表单模式验证器将 $ 添加到正则表达式并破坏验证

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

问题描述

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

编辑：应该成功的密码：

应该失败的密码：

验证器声明： 

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

标签： regexangularangular-reactive-forms

解决方案

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

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

或者，更好的是，在使用正则表达式进行密码验证时，遵循对比原则：

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,}$

请注意，如果您使用正则表达式文字，它不会自动添加锚点，请手动添加它们：

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

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

查看正则表达式演示

细节

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

推荐阅读