如何使用JS创建邮编校验器实现WooCommerce结账页购买按钮管控

这个需求完全可以通过原生JS实现，不需要依赖重型WooCommerce付费插件，所有逻辑都做了新手向的简化处理，即使是刚学编码2个月的入门者，也能快速修改落地。

// -------------------------- 新手仅需修改下方这一行的邮编列表即可 --------------------------
// 把引号里的内容替换成你自己的可配送邮编，多个邮编之间用逗号分隔
const allowedPostcodes = ["100000", "100001", "200000", "200001"];
// -------------------------------------------------------------------------------------------

// 校验函数：实时判断邮编是否合法，自动控制购买按钮状态
const checkPostcodeValid = () => {
  // WooCommerce默认的账单邮编输入框选择器，无需手动修改
  const postcodeInput = document.getElementById("billing_postcode");
  // WooCommerce默认的提交订单（购买）按钮选择器，无需手动修改
  const placeOrderBtn = document.getElementById("place_order");

  // 如果页面未加载完成、找不到对应元素，直接跳过避免报错
  if (!postcodeInput || !placeOrderBtn) return;

  // 获取用户输入的邮编，自动清除前后多余空格，避免输错空格导致的误判
  const userInputPostcode = postcodeInput.value.trim();
  // 判断输入的邮编是否在允许配送的列表内
  const isPostcodeAllowed = allowedPostcodes.includes(userInputPostcode);

  if (!isPostcodeAllowed) {
    // 禁用购买按钮
    placeOrderBtn.disabled = true;
    // 给按钮加置灰样式，明确传递不可点击的状态
    placeOrderBtn.style.opacity = "0.5";
    placeOrderBtn.style.cursor = "not-allowed";

    // 给用户加个清晰的错误提示，避免疑惑为什么按钮点不动
    let invalidTip = document.getElementById("postcode-invalid-tip");
    if (!invalidTip) {
      invalidTip = document.createElement("p");
      invalidTip.id = "postcode-invalid-tip";
      invalidTip.style.color = "red";
      invalidTip.textContent = "当前邮编不在我们的配送范围内，暂时无法下单";
      // 把提示插到邮编输入框的后面，位置更显眼
      postcodeInput.insertAdjacentElement("afterend", invalidTip);
    }
  } else {
    // 恢复购买按钮的可用状态
    placeOrderBtn.disabled = false;
    placeOrderBtn.style.opacity = "1";
    placeOrderBtn.style.cursor = "pointer";
    // 邮编合法时移除之前的错误提示
    const invalidTip = document.getElementById("postcode-invalid-tip");
    if (invalidTip) invalidTip.remove();
  }
};

// 适配WooCommerce动态加载场景：选完省份/区域后页面会重新渲染邮编框，这个监听会自动触发校验
const pageObserver = new MutationObserver(() => {
  checkPostcodeValid();
});
// 监听整个页面的DOM变化，不需要手动绑定输入框的keyup事件
pageObserver.observe(document.body, { childList: true, subtree: true });

// 页面首次加载完成后，自动执行一次校验
window.addEventListener("load", checkPostcodeValid);

• 代码不要直接修改WooCommerce或者主题的核心文件，后续系统更新时很容易被覆盖丢失，建议用站点常用的自定义代码插件，把这段脚本挂载到结账页的公共位置加载即可
• 当前的匹配逻辑是精确匹配邮编，如果后续你需要支持邮编段校验（比如100000-100999都属于配送范围），只需要修改判断isPostcodeAllowed的那行逻辑，换成数值大小的范围判断即可，改动难度很低
• 这套JS逻辑是给用户提供即时的操作反馈，减少用户填完所有收货信息才被告知邮编不能配送的挫败感，等你后续对WooCommerce的钩子逻辑熟悉了，可以再加一层服务端校验，避免有人绕过前端脚本直接提交不符合要求的订单，初期用这套前端逻辑完全能覆盖日常的用户使用场景

注：代码已经做了兼容处理，不会因为页面元素加载时机的问题报错，也适配了WooCommerce地址联动的动态渲染逻辑，复制过去就能运行。

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