如何用正则实现Angular表单校验：判断字符串所有单词均以Z开头

你之前的写法只校验了字符串开头的内容，没有覆盖后续的单词，也没有限制字符串结尾的匹配，所以会出现漏判的情况。

解决方法 #

你可以使用如下正则规则实现所有单词均以Z开头的校验：

^Z\w*(?:\s+Z\w*)*$

规则逻辑说明 #

• ^ 匹配字符串的起始位置，确保校验从第一个字符开始
• Z\w* 限定第一个单词必须以大写Z开头，后接任意数量的字母、数字、下划线字符
• (?:\s+Z\w*)* 非捕获组，匹配0次或多次「1个及以上空白符 + Z开头的单词」的组合，确保字符串后续所有单词都满足以Z开头的要求
• $ 匹配字符串的结束位置，避免字符串末尾出现不符合规则的内容

Angular使用注意事项 #

如果你直接将规则写在模板的pattern属性中，需要对反斜杠做转义处理，写法如下：

<input pattern="^Z\\w*(?:\\s+Z\\w*)*$">

如果是通过组件属性绑定正则对象，可以直接使用原始规则，还可以按需添加标志位，比如添加i标志实现同时匹配大小写Z/z开头：

// 组件类中定义
zStartPattern = /^Z\w*(?:\s+Z\w*)*$/i;

<!-- 模板中绑定 -->
<input [pattern]="zStartPattern">

匹配测试 #

• 可匹配：ZSTH ZANOTHER、Zoo、Z123 Z_abc
• 不可匹配：Z something、zoo（不加i标志时）、Zoo test

补充：如果要求单词之间仅允许单个空格分隔，可以把正则里的\s+替换为单个空格即可。

内容的提问来源于stack exchange，提问作者Słowik