正则添加^$长度限制后VAT号码校验功能失效如何解决

问题原因 #

你在正则首尾添加^（匹配字符串开头）和$（匹配字符串结尾）后校验失效，核心原因是校验的目标字符串和正则的匹配规则不对应：
你当前的逻辑是先把国家代码（比如奥地利对应的AT）和用户输入的VAT编号拼接成完整的vat字符串，再用正则校验这个拼接后的字符串。但你修改后的奥地利正则/^[U]{1}[0-9]{8}$/要求字符串必须以U开头，而拼接后的字符串实际是以AT开头，自然永远匹配失败。
同理如果意大利的正则也添加^和$，也会因为拼接后的字符串以IT开头，和要求11位数字开头的正则不匹配导致校验失效。

解决方法 #

二选一即可：

方案1：调整正则匹配拼接后的完整VAT字符串 #

直接把国家代码前缀加入正则规则，同时建议对用户输入做去空格处理避免误判：

function vatValidate() {
  let vatFormat;
  let countryCode = document.getElementById('countries').value;
  switch (countryCode) {
    case 'Austria':
      countryCode = 'AT';
      vatFormat = /^ATU[0-9]{8}$/;
      break;
    default:
      countryCode = 'IT';
      vatFormat = /^IT[0-9]{11}$/;
  }
  let vatNumber = document.getElementById('pivaid').value.trim();
  let vat = countryCode + vatNumber;
  if (vatFormat.test(vat)) {
    console.log('Correct');
  } else {
    console.log('Error');
  }
}

方案2：直接校验用户输入的VAT编号，不拼接国家代码 #

如果不需要生成带国家前缀的完整VAT字符串，直接对用户输入的内容做校验即可：

function vatValidate() {
  let vatFormat;
  let countryCode = document.getElementById('countries').value;
  switch (countryCode) {
    case 'Austria':
      vatFormat = /^U[0-9]{8}$/;
      break;
    default:
      vatFormat = /^[0-9]{11}$/;
  }
  let vatNumber = document.getElementById('pivaid').value.trim();
  if (vatFormat.test(vatNumber)) {
    console.log('Correct');
  } else {
    console.log('Error');
  }
}

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