如何在onBlur时移除字符串首次短横线并匹配指定正则

我有一个支持粘贴/手动输入的字符串输入框，要求输入内容遵循xxx-A-mmddyyyy-xxxxxx格式。需要在onBlur()事件触发时，自动移除字符串中首次出现的短横线，将格式转为xxxA-mmddyyyy-xxxxxx；同时要用给定的正则规则限制输入格式，现有两个正则：

public static readonly NUMBERWITHDASH = /^[0-9]{3}-[A-Z]-[0-9]{8}-[0-9]{6}$/;
public static readonly NUMBERNODASH = /^[0-9]{3}[A-Z]-[0-9]{8}-[0-9]{6}$/;

1. 实现onBlur处理函数 #

直接用正则精准定位并替换第一个短横线，同时结合正则验证格式：

handleInputBlur(event: Event) {
  const input = event.target as HTMLInputElement;
  let val = input.value.trim();

  // 匹配原始格式则移除第一个短横线
  if (YourClassName.NUMBERWITHDASH.test(val)) {
    // 捕获前3位数字，去掉后面的短横线
    val = val.replace(/^(\d{3})-/, '$1');
    input.value = val;
  }
  // 格式既不符合原始也不符合目标格式，做错误处理
  else if (!YourClassName.NUMBERNODASH.test(val)) {
    input.value = '';
    alert('输入格式错误，请按xxx-A-mmddyyyy-xxxxxx格式填写');
  }
}

2. 输入过程中的格式限制（可选） #

如果要在用户输入时就限制非法字符，可以加个input事件处理：

handleInputChange(event: Event) {
  const input = event.target as HTMLInputElement;
  // 只保留数字、大写字母和短横线，同时限制总长度（原始格式最长20位）
  input.value = input.value.replace(/[^0-9A-Z-]/g, '').slice(0, 20);
}

3. 正则规则说明 #

• NUMBERWITHDASH：校验用户输入的原始格式，确保是3位数字+短横线+大写字母+短横线+8位日期数字+短横线+6位数字。
• NUMBERNODASH：校验处理后的目标格式，确保是3位数字直接拼接大写字母，后面的短横线和数字段保持不变。

内容的提问来源于stack exchange，提问作者Peter The Angular Dude