结账页自定义zipcode校验

解决方案
1

以下场景实现的是，用户输入的 zipcode 的前5位包含在不可用列表里的话，则zipcode不可用 ，禁用下一步按钮并添加警告提示。

通过自定义代码实现：

<script>
(() => {
 const unavailableList = ["90704","92178","92039","92038","91933"];

 document.addEventListener('blur', (event) => {
  const target = event.target;

  if (target.tagName === "INPUT" && target.name === 'postcode') {
    const value = target.value.trim();  // 获取当前输入的zipcode

    if (value.length === 0) return;

    const zip5 = value.slice(0, 5); 
    const isUnavailable = unavailableList.includes(zip5); // 前5位包含在不可用列表里的话，该zipcode不可用

    const completeBtn = document.querySelector("#trade-complete-order");
    const confirmBtn = document.querySelector(".address_modal-confirm-btn");
    const container = target.closest('.shopline-element-checkout-shipment-address-form-postcode');

    if (!container) {
      console.warn('未找到容器 .shopline-element-checkout-shipment-address-form-postcode');
      return;
    }

    const existing = container.querySelector('#zip-delivery-unavailable');

    if (isUnavailable) {
      // 禁用下一步按钮并添加警告提示
      completeBtn && (completeBtn.disabled = true);
      confirmBtn && (confirmBtn.disabled = true); // 禁用下一步按钮

      if (!existing) {
        const warning = document.createElement('p');
        warning.className = 'zipcode-delivery-unavailable';
        warning.id = 'zip-delivery-unavailable';
        warning.textContent = 'FPO/APO address cannot be delivered, please use another address.';
        warning.style.color = 'red';

        container.appendChild(warning);  // 添加警告提示
      }
    } else {
      // 启用按钮并移除警告提示
      completeBtn && (completeBtn.disabled = false);
      confirmBtn && (confirmBtn.disabled = false);

      existing && existing.remove();
    }
  }
 }, true);

})();

</script>