如何通过JavaScript实现Social Security Number（社保号码）输入的数字格式化？

嘿，很高兴看到你在前端验证这块持续打磨技能！姓名验证的脚本写得不错，接下来咱们聊聊Social Security Number（SSN）的数字格式化——这在表单交互里能大幅提升用户体验，下面给你两种实用的实现思路：

一、实时输入格式化（用户输入时自动补充分隔符） #

这种方式会在用户输入过程中自动按照XXX-XX-XXXX的格式添加分隔符，避免用户手动输入符号，同时过滤非数字字符。

实现代码： #

HTML部分：

<form>
  <label for="ssn">Social Security Number:</label>
  <input type="text" id="ssn" maxlength="11" placeholder="XXX-XX-XXXX">
  <!-- 你已有的姓名输入框等其他表单元素 -->
</form>

JavaScript部分：

// 定义SSN格式化函数
function formatSSN(inputElement) {
  // 移除所有非数字字符
  let rawValue = inputElement.value.replace(/\D/g, '');
  // 根据数字长度拼接格式
  let formattedValue = rawValue;
  
  if (rawValue.length > 3) {
    formattedValue = `${rawValue.slice(0, 3)}-${rawValue.slice(3)}`;
  }
  if (rawValue.length > 5) {
    formattedValue = `${formattedValue.slice(0, 6)}-${rawValue.slice(5, 9)}`;
  }
  
  inputElement.value = formattedValue;
}

// 给SSN输入框绑定输入事件
document.getElementById('ssn').addEventListener('input', function(e) {
  formatSSN(e.target);
});

二、失去焦点时验证+格式化 #

如果希望在用户输入完成后再统一处理格式并验证合法性，可以用失去焦点（blur）事件来实现，确保输入的是完整的9位数字后再格式化。

实现代码： #

// 验证并格式化SSN的函数
function validateAndFormatSSN(inputElement) {
  // 移除所有非数字字符
  let rawDigits = inputElement.value.replace(/\D/g, '');
  
  // 验证是否为9位数字（SSN的有效长度）
  if (rawDigits.length !== 9) {
    alert('Please enter a valid 9-digit Social Security Number!');
    inputElement.value = '';
    return false;
  }
  
  // 格式化标准SSN格式
  inputElement.value = `${rawDigits.slice(0,3)}-${rawDigits.slice(3,5)}-${rawDigits.slice(5)}`;
  return true;
}

// 绑定失去焦点事件
document.getElementById('ssn').addEventListener('blur', function(e) {
  validateAndFormatSSN(e.target);
});

额外提示： #

• 可以把两种方式结合起来：实时格式化提升输入体验，失去焦点验证确保数据合法性。
• 实际项目中处理SSN这类敏感信息时，要注意传输和存储的安全性（比如加密传输），不过作为练习重点先放在格式化逻辑上就好。

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