如何实现SSN输入表单字段的验证与格式设置

SSN输入字段验证与格式设置实现方案 #

1. 输入即时自动格式化（提升用户体验） #

用户输入过程中自动插入短横线，无需用户手动输入，同时限制输入内容仅为数字：

const ssnInput = document.getElementById('correctSSN');

ssnInput.addEventListener('input', (e) => {
  // 先移除所有非数字字符
  let value = e.target.value.replace(/\D/g, '');
  // 按位置插入短横线
  if (value.length > 3) value = value.slice(0,3) + '-' + value.slice(3);
  if (value.length > 6) value = value.slice(0,6) + '-' + value.slice(6, 10);
  e.target.value = value;
});

2. 前端合法性校验 #

原生HTML校验（无需额外JS）

直接给input标签添加pattern属性和必填标记即可实现原生表单校验：

<input 
  type="text" 
  placeholder="XXX-XX-XXXX"  
  class="form-control" 
  id="correctSSN"
  pattern="\d{3}-\d{2}-\d{4}"
  required
  title="请输入符合XXX-XX-XXXX格式的9位SSN号码"
>

JS自定义校验（适配自定义错误提示逻辑）

表单提交前主动校验格式是否符合要求：

function validateSSN(ssn) {
  const ssnReg = /^\d{3}-\d{2}-\d{4}$/;
  return ssnReg.test(ssn);
}

// 表单提交时调用
document.querySelector('form').addEventListener('submit', (e) => {
  const ssnVal = ssnInput.value.trim();
  if (!validateSSN(ssnVal)) {
    e.preventDefault();
    alert('SSN格式错误，请输入XXX-XX-XXXX格式的9位数字');
    // 可替换为自定义的页面内错误提示样式
  }
});

3. 后端二次校验 #

前端校验仅做体验优化，所有提交的数据必须在后端再次校验，避免前端校验被绕过导致非法数据入库，校验正则与前端一致为^\d{3}-\d{2}-\d{4}$。

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