Angular5响应式表单英国邮政编码正则验证异常问题排查

我刚仔细看了你的自定义验证函数，问题出在正则表达式缺少结束锚点上！

你当前的正则只在开头用了^来匹配字符串起始位置，但没有在结尾加上$来匹配字符串结束位置。这就导致只要输入内容的开头部分符合英国邮编格式，哪怕后面跟了一堆额外的字母数字，test()方法都会返回true——比如NW10 5NWRRRRRRRRRRRRRRRR，前面的NW10 5NW已经满足正则匹配条件，后面的冗余内容完全被忽略了。

而你在测试工具上得到正确结果，大概率是因为工具默认启用了“完全匹配”模式，或者你测试时只输入了纯正确格式的字符串，但在JavaScript中，RegExp.test()只要找到一个匹配的子串就会返回true，不会自动校验整个字符串的完整性。

修改后的验证函数 #

只需要给你的正则表达式加上结尾锚点$，就能解决这个问题，我还额外做了两个小优化：

function postCodeValidator(control: FormControl) { 
  let givenPostCode = control.value?.trim(); // 先去除前后空格，避免无效空格干扰
  if (!givenPostCode) return null; // 空值交给内置required验证器处理，职责更清晰

  // 末尾添加$，确保整个字符串完全匹配，无多余内容
  let UKPostCodePattern = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z]))))\s?[0-9][A-Za-z]{2})$/; 
  
  var isUKPostCodeValid = UKPostCodePattern.test(givenPostCode); 
  console.log("postcode validity ", isUKPostCodeValid, " for ", givenPostCode); 

  if(!isUKPostCodeValid) { 
    return { 
      postCode: { 
        required:"UK Valid PostCode", 
        provided: givenPostCode 
      } 
    } 
  } 
  return null; 
}

现在测试你的异常案例：

• 正确格式NW10 5NW：验证通过
• 错误格式NW10 5NWRRRRRRRRRRRRRRRR：验证失败，符合预期

内容的提问来源于stack exchange，提问作者K.Z