Angular 反应式表单模式验证未按预期工作答案

【问题标题】：Angular reactive forms pattern validation not working as expectedAngular 反应式表单模式验证未按预期工作
【发布时间】：2020-01-22 09:29:05
【问题描述】：

我对密码进行了反应式表单验证，模式如下：

new RegExp('^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#$^+=!*()@%&]).{8,50}$');

我的目标是验证字符串是这样的：

8 到 50 个字符之间
有一个小写字母
有一个大写字母
有号码
并且有一个符号

由于某种原因，它就像一个魅力，但如果我输入一个以单个数字开头的密码，则验证失败。

我做错了什么？示例密码：

1dD5a971# -- 不匹配

11dD5a971# -- 匹配

角码：

 static PASSWORD_PATTERN = new RegExp('^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#$^+=!*()@%&]).{8,50}$');
this.form= fb.group({
            user: [...],
            password: ['', [Validators.compose([
                Validators.required,
                Validators.min(8),
                Validators.max(50),
                Validators.pattern(AddUserComponent.PASSWORD_PATTERN)
            ])]]
        };

提前谢谢你。

【问题讨论】：

我认为这种模式有效吗？ regex101.com/r/tv9IIM/1
是的，我会在几秒钟内用我使用的代码更新我的问题。
它应该适用于当前代码。
第一个grop中的两个\是故意的吗？
@chrnx 当然可以。虽然肯定可以写成static PASSWORD_PATTERN = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#$^+=!*()@%&]).{8,50}$/;

标签： regex angular

【解决方案1】：

我不是正则表达式专家，但如果你制作一个多模式而不是一个复杂的模式可能会好得多，我的目标是让它尽可能简单，你可以拥有不同的消息库模式。

    this.form = fb.group({
      password: [
        "",
        [
          Validators.required, 
          Validators.minLength(8),
          Validators.maxLength(50),
          Validators.pattern(/[A-Z]/),
          Validators.pattern(/[a-z]/),
          Validators.pattern(/[0-9]/),
          Validators.pattern(/[!@#$]/),
         ]
      ]
    });

demo ?

【讨论】：

这里所有{1,}s都是多余的，考虑删除。
嗯，它有效。此外，我可以自定义更多的错误消息给用户。谢谢老兄。