Angular 16模板驱动表单使用pattern进行邮箱验证报错求助

问题根源 #

报错是因为正则表达式存在两个关键问题：

1. 字符类[a-z0-9._%+-]中的-被解析为范围运算符，代码尝试匹配+到-的字符范围，但+的ASCII码（43）大于-的ASCII码（45），属于无效范围，直接触发语法错误。
2. 域名部分的.未转义，会匹配任意字符，而非实际的点号，不符合邮箱格式校验的需求。

修正方案 #

调整正则表达式，解决以上两个问题：

• 将字符类中的-移到末尾（或开头），避免被当作范围运算符；
• 转义域名部分的.，确保匹配真实的点号；
• 由于Angular模板中反斜杠需要转义，所以用\\代替单个\。

修正后的正则：

^[a-z0-9._%+\\-]+@[a-z0-9.\\-]+\\.[a-z]{2,4}$

模板中使用示例 #

<input 
  type="email" 
  name="email" 
  pattern="^[a-z0-9._%+\\-]+@[a-z0-9.\\-]+\\.[a-z]{2,4}$" 
  #email="ngModel" 
  [(ngModel)]="userEmail"
>

额外说明 #

Angular 16对正则表达式的校验更严格（错误提示中出现了/v flag，即Unicode模式），所以之前能正常运行的正则在新版本中会触发语法错误。调整字符类中-的位置是此类问题的通用解决方案。

内容的提问来源于stack exchange，提问作者user22018144