Angular中带可选加号的10-12位手机号验证异常问题

你的正则表达式存在两个关键问题，导致带+号的手机号无法通过验证：

1. +号未转义：正则中+是特殊元字符，表示匹配前面元素1次或多次，必须用反斜杠转义为\+才能匹配字面意义的加号
2. 数字位数限制错误：原正则要求数字部分必须是12位，但需求是10-12位，应该用{10,12}替代{12}

正确的验证规则 #

修正后的正则表达式有两种写法：

• 字符串形式（注意双重转义反斜杠）：

Validators.pattern("^\\+?[0-9]{10,12}$")

• 正则字面量形式（更简洁，无需双重转义）：

Validators.pattern(/^\+?[0-9]{10,12}$/)

代码示例 #

组件中定义表单控件：

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

phoneControl = new FormControl('', [
  Validators.required,
  Validators.pattern(/^\+?[0-9]{10,12}$/)
]);

模板中展示错误提示：

<input type="text" [formControl]="phoneControl" placeholder="请输入手机号">
<div *ngIf="phoneControl.invalid && (phoneControl.dirty || phoneControl.touched)">
  <div *ngIf="phoneControl.errors?.['pattern']">
    请输入10-12位数字，可选择以+开头
  </div>
</div>

正则规则说明 #

• ^：匹配字符串起始位置
• \+?：匹配0次或1次加号（?表示可选）
• [0-9]{10,12}：匹配10到12位数字
• $：匹配字符串结束位置

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