带可选国家码的手机号输入掩码实现方案咨询

Absolutely! You can absolutely build this phone number input mask using regex and jQuery—here's a step-by-step breakdown tailored to your required formats:

核心思路 #

• 先通过正则过滤非法输入，只保留数字、+、(、)、空格、-和x（分机号标识）
• 根据输入内容动态适配格式：自动识别是否带国家码、是否需要添加分机号后缀
• 监听输入事件实时更新内容，让用户输入过程中自动完成格式化

正则表达式设计 #

我们需要两个关键正则来支撑功能：

1. 非法字符过滤正则：快速移除所有不允许的字符，同时统一分机号标识为小写x

   /[^0-9+\-\(\)x\s]/gi
   

2. 格式验证正则：用于最终验证输入是否符合要求，同时可以提取号码的各个组成部分

   /^(\+?\d{1,3})?\s?(\(\d{3}\))?\s?(\d{3})[-\s]?(\d{4})(?:\s*x(\d+))?$/
   

   分组解释：
   • 第1组：可选国家码（带+前缀，1-3位数字）
   • 第2组：3位区号（带括号）
   • 第3组：3位号码前缀
   • 第4组：4位号码后缀
   • 第5组：可选分机号（以x开头，后跟任意长度数字）

jQuery 完整实现代码 #

下面是可直接使用的代码，包含实时格式化、输入过滤和提交验证功能：

$(document).ready(function() {
  // 监听输入框的输入/按键事件，实时格式化
  $('#phone-input').on('input keyup', function() {
    let inputVal = $(this).val();
    
    // 第一步：清理非法字符，统一分机号为小写x
    inputVal = inputVal.replace(/[^0-9+\-\(\)x\s]/gi, '').replace(/X/g, 'x');
    
    // 第二步：根据是否包含分机号，分情况格式化
    const hasExtension = inputVal.includes('x');
    let formattedVal = '';

    if (hasExtension) {
      // 拆分手机号部分和分机号部分
      const [phoneSegment, extSegment] = inputVal.split('x');
      formattedVal = formatBasePhone(phoneSegment.trim());
      // 有分机号内容才添加后缀
      if (extSegment?.trim()) {
        formattedVal += ` x${extSegment.trim()}`;
      }
    } else {
      // 无分机号，直接格式化基础手机号
      formattedVal = formatBasePhone(inputVal);
    }

    // 更新输入框内容
    $(this).val(formattedVal);
  });

  // 基础手机号格式化函数（处理国家码、区号、号码分段）
  function formatBasePhone(phoneStr) {
    let formatted = '';
    const cleanDigits = phoneStr.replace(/[^\d+]/g, '');
    const hasCountryCode = cleanDigits.startsWith('+');

    if (hasCountryCode) {
      // 提取1-3位国家码
      const countryCode = cleanDigits.match(/^\+\d{1,3}/)[0];
      formatted += `${countryCode} `;
      let remainingDigits = cleanDigits.replace(countryCode, '');

      // 格式化美国式手机号分段
      if (remainingDigits.length >= 3) {
        formatted += `(${remainingDigits.slice(0,3)}) `;
        remainingDigits = remainingDigits.slice(3);
      }
      if (remainingDigits.length >= 3) {
        formatted += `${remainingDigits.slice(0,3)} - `;
        remainingDigits = remainingDigits.slice(3);
      }
      if (remainingDigits.length > 0) {
        formatted += remainingDigits.slice(0,4);
      }
    } else {
      // 无国家码的情况
      if (cleanDigits.length >= 3) {
        formatted += `(${cleanDigits.slice(0,3)}) `;
        remainingDigits = cleanDigits.slice(3);
      }
      if (remainingDigits?.length >= 3) {
        formatted += `${remainingDigits.slice(0,3)} - `;
        remainingDigits = remainingDigits.slice(3);
      }
      if (remainingDigits?.length > 0) {
        formatted += remainingDigits.slice(0,4);
      }
    }

    // 移除末尾多余的分隔符（比如号码长度不足时的` - `）
    return formatted.replace(/\s-$/, '');
  }

  // 可选：提交时验证格式是否合规
  $('#phone-form').on('submit', function(e) {
    const phoneVal = $('#phone-input').val();
    const validPattern = /^(\+?\d{1,3})?\s?\(\d{3}\)\s?\d{3}\s?-\s?\d{4}(?:\s*x\d+)?$/;
    
    if (!validPattern.test(phoneVal)) {
      alert('请输入有效的手机号格式，例如：(123) 456 - 7890 或 +1 (123) 456 - 7890 x1234');
      e.preventDefault();
    }
  });
});

对应的HTML结构：

<form id="phone-form">
  <label for="phone-input">手机号：</label>
  <input type="text" id="phone-input" placeholder="例如(123) 456 - 7890 x1234">
  <button type="submit">提交</button>
</form>

功能演示 #

测试以下输入场景，会自动格式化到目标样式：

• 输入1234567890 → 自动转为(123) 456 - 7890
• 输入+11234567890 → 自动转为+1 (123) 456 - 7890
• 输入1234567890x1234 → 自动转为(123) 456 - 7890 x1234
• 输入+11234567890x1234 → 自动转为+1 (123) 456 - 7890 x1234

自定义提示 #

如果需要适配其他国家的手机号格式（比如欧洲、亚洲的分段规则），只需修改formatBasePhone函数中的号码分段逻辑即可，正则部分可以根据需求调整国家码长度或分隔符规则。

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