Angular Material数字输入框正则验证结果与regex101不一致问题

AI 小北

2026-9-29

差异根本原因

你遇到的不一致是因为Angular处理type="number"类型输入框的取值逻辑和regex101的纯字符串校验场景不同：

regex101上测试的是字符串类型的"099"、"0990"，正则直接匹配原始字符串，前导零会被识别，自然不匹配/^[1-9][0-9]{0,2}$/规则。
而Angular中数字输入框的表单值会自动转换为Number数值类型，099作为数值会自动丢弃前导零转成99，校验时正则是匹配99转成的字符串"99"，完全符合你的正则规则，所以不会触发报错。

解决方案

方案1：改用文本输入框+数字限制

如果需要严格校验输入格式（禁止前导零），把输入框改为type="text"，同时增加输入限制只允许输入数字，此时表单拿到的是原始字符串，正则校验逻辑就会和regex101完全一致：

<input type="text" matInput formControlName="num">

方案2：自定义数值校验器替代正则

如果要保留数字输入框的上下箭头交互，不要用正则校验，直接自定义校验器判断数值范围+原始输入格式：

// 自定义校验器
const numValidator = (control: AbstractControl) => {
  const value = control.value;
  // 先判断数值范围
  if (isNaN(value) || value < 1 || value > 999) {
    return { invalidNum: true };
  }
  // 再判断是否有前导零：取输入框原始字符串值
  const inputEl = document.getElementById('your-input-id') as HTMLInputElement;
  if (inputEl && inputEl.value.startsWith('0') && inputEl.value.length > 1) {
    return { leadingZero: true };
  }
  return null;
};

// 表单中使用
num: new FormControl(null, [numValidator])