如何通过JS或jQuery根据国家选择动态调整邮编正则验证规则

实现代码 #

你只需要把原有JS替换为以下内容即可实现需求，逻辑是监听国家下拉框的切换事件，根据选中值动态更新邮编输入框的校验规则：

$(function() {
  // 定义更新邮编校验规则的公共函数
  function updateZipPattern() {
    const $zipInput = $('p.zip input');
    const selectedCountry = $('#13037 option:selected').text().trim();
    let pattern = '';

    // 国家分支判断
    if (selectedCountry === 'US') {
      // 美国邮编规则：5位数字，可选加-和4位扩展码
      pattern = '\\d{5}(?:-\\d{4})?';
    } else if (selectedCountry === 'Canada') {
      // 加拿大邮编规则：字母数字字母 可选空格 数字字母数字，不区分大小写
      pattern = '[a-zA-Z]\\d[a-zA-Z] ?\\d[a-zA-Z]\\d';
    }

    // 给输入框更新pattern属性
    $zipInput.prop('pattern', pattern);
    // 可选：清空之前输入的不匹配内容，避免残留校验错误
    $zipInput.val('');
  }

  // 页面初始化时执行一次规则设置
  updateZipPattern();
  // 国家下拉框切换时更新规则
  $('#13037').on('change', updateZipPattern);
});

补充说明 #

• HTML5的pattern校验默认会做全匹配校验，不需要额外在正则首尾加^和$
• 字符串形式的正则里\需要转义为\\才能被正确识别
• 如果你需要按option的value判断而非文本，把获取选中值的逻辑改为const selectedCountryVal = $('#13037').val();，再对应判断值为47917（US）和47919（Canada）即可

内容的提问来源于stack exchange，提问作者Katy H.