无法使正则表达式正常运行

Question

我目前正在为使用 Shopify 的客户做一些自定义结帐字段。他们让我为使用其欧盟网站的客户添加增值税字段，该网站运行良好。但是，他们的客户团队遇到了一些问题，因为一些客户正在输入随机数据。所以我想我会尝试使用正则表达式来建立某种验证系统，但我似乎无法让它工作。 下面是我的 HTML 代码和用于此检查/错误消息的 JS 的 sn-p。

    // VAT Field Checks
    $("#checkout_vat_number").on("keypress", function(evt) {
        var theEvent = evt || window.event;
        var len_val = $(this).val().length;
        if (theEvent.type === 'paste') {
            key = event.clipboardData.getData('text/plain');
        } else {
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode(keyCode);
        }
      
        if(len_val < 11){ 
          var regex = /^[a-zA-Z]{2}\d{9}$/g; //Checks to make sure code is 2 letters and then 9 numbers
          if( !regex.test (key) ) {
            $("#error-for-vat-text").show();
            $("#error-for-vat-text").text("Please add your 2 digit country code and 9 digit tax number");
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
          } else {
            $("#error-for-vat-text").hide();
            $("#error-for-vat-text").text("");
          }
        } else {
             theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }

    });

<div id="checkout_vat">
  <p class="section__text">Fill out your VAT number including 2 digit country code and 9 numbers, excluding any special characters.</p>
  <div class="fieldset" id="vat">
    <div data-address-field="vat" id="vat_field" class="field field--required">
      <div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_vat_number">VAT Number</label>
        <input placeholder="VAT Number" autocomplete="vat number" autocorrect="off" class="field__input field__input--numeric" aria-describedby="error-for-vat" aria-invalid="true" aria-required="true" size="30" type="text" value="" pattern=".{11,11}" name="checkout[attributes][VAT Number]"
          id="checkout_vat_number">
        <input type="hidden" name="checkout[attributes][Agreed that responsible for any import duties/taxes and/or associated costs incurred.]" value="" id="checkout_duties_taxes_input">
      </div>
    </div>
    <p class="field__message field__message--error" id="error-for-vat-text"></p>
    <p class="field__message field__message--error" id="error-for-vat" style="display:none;">Enter a VAT number</p>
  </div>
</div>

我相信我的 ^[a-zA-Z]{2}\d{9}$/g 正则表达式是正确的（2 个字母后跟 9 个数字）但是我似乎找不到我做错了什么。请记住，JS 不是我的强项，所以可能会有很大的问题。
即使有办法将String.fromCharCode 修改为只接受2 个字母和9 个数字但我不确定？

任何指导将不胜感激。

Answer 1

使用keyup 监听器。你的正则表达式可以简化，但基本上没有错。这是您可以使用的minimal reproducable example。它使用event delegation 来处理事件。

document.addEventListener(`keyup`, handle);

function handle(evt) {
  if (evt.target.id === `demo`) {
    document.querySelector(`#validate`).textContent = 
    evt.target.value.trim().length < 1 
    ? `start typing...` 
    : !/^[a-z]{2}\d{9}$/i.test(evt.target.value) 
      ? `not ready yet` 
      : `yep, there we are!`;
  }
}

body {
  margin: 2rem;
  font: 12px/15px verdana, arial;
}

<div>
  <div>We expect 2 characters followed by 9 digits, e.g. AG120981212.</div>
  <br><input id="demo"> <span id="validate">start typing&hellip;</span>
</div>