如何分解 Angular7 中的验证检查？

Question

我有一个输入，我必须以视觉方式显示用户已满足多个图标要求。

我使用的正则表达式是：

'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$'

但是，我需要能够显示用户输入了一个数字、一个字母字符、字符串前后没有空格，并且有 4 个不同的字符。当用户完全填写上述要求之一时，该要求旁边的指示器图标必须变为绿色。我到处找例子。我可以在 ngIf 语句中进行简单的检查吗？我好像做不到。

Answer 1

我不知道你打算如何处理一次点亮树上的 1 个灯泡，
但是这个要求的正则表达式 and has 4 different characters
这是。

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=[a-zA-Z0-9]+$).*?(.).*?(?!)(.).*?(?!|)(.).*?(?!||)(.).*?$

已解释

 ^                             # BOS

 (?= .* [a-z] )                # At least a lower case letter
 (?= .* [A-Z] )                # At least a upper case letter
 (?= .* [0-9] )                # At least a number
 (?= [a-zA-Z0-9]+ $ )          # All chars must be letters or numbers

 .*? 
 ( . )                         # (1), First unique char

 .*? 
 (?!  )
 ( . )                         # (2), Second unique char

 .*? 
 (?!  |  )
 ( . )                         # (3), Third unique char

 .*? 
 (?!  |  |  )
 ( . )                         # (4), Fourth unique char

 .*? 

 $                             # EOS

如何分解 Angular7 中的验证检查？

How to break down validation checks in Angular7?

regex

regex-negation

regex-lookarounds

angular7