Angular 6正则表达式报错解决：响应式表单手机号验证

错误原因分析 #

你遇到的正则解析错误，由两个核心问题导致：

1. 正则表达式出现重复的起始符^和结束符$（原正则写为/^/^...$/$/），导致正则引擎无法正确识别边界
2. 匹配数字的d未转义为\d，且开头的+作为特殊量词未转义，触发了"Nothing to repeat"的语法错误

修正方案 #

1. 正确的正则表达式

修正后的正则（支持带国际区号、可选分隔符、可选分机号的手机号格式）：

/^\+([0-9]{1,3})?[- ]?(\d{3})?[- ]?(\d{3})[- ]?(\d{4,6})( ext \d{4})?$/

2. Angular表单中应用示例

在响应式表单的验证器中直接使用：

import { FormBuilder, Validators } from '@angular/forms';

// ...

this.phoneForm = this.fb.group({
  phoneNumber: ['', [
    Validators.required,
    Validators.pattern(/^\+([0-9]{1,3})?[- ]?(\d{3})?[- ]?(\d{3})[- ]?(\d{4,6})( ext \d{4})?$/)
  ]]
});

如果使用字符串形式的正则，需要对反斜杠进行二次转义：

Validators.pattern('^\\+([0-9]{1,3})?[- ]?(\\d{3})?[- ]?(\\d{3})[- ]?(\\d{4,6})( ext \\d{4})?$')

可选调整 #

你可以根据业务需求修改正则规则：

• 调整国际区号的位数范围（{1,3}）
• 修改分隔符允许的类型（比如只保留横杠，去掉空格）
• 调整手机号主体的位数要求（{4,6}）

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