如何限制输入框仅允许输入11位数字，可选加短横线及后续11位数字

核心思路 #

先过滤掉所有非数字和短横线的字符，再按照「最多11位数字 → 可选短横线 → 最多11位数字」的规则约束输入内容，同时支持实时校验和格式修正。

步骤1：引入jQuery #

如果你的页面还没引入jQuery，先在<head>标签里添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

步骤2：修改输入框代码 #

可以移除原生oninput事件，改用jQuery绑定逻辑，保持输入框结构简洁：

<input type="text" class="form-control" placeholder="e.g 03xxxxxxxxx-03xxxxxxxxx" id="contact">

步骤3：编写jQuery限制逻辑 #

$(document).ready(function() {
  // 实时监听输入事件，修正输入内容
  $('#contact').on('input', function() {
    let inputValue = $(this).val();
    
    // 第一步：只保留数字和短横线，过滤其他所有字符
    inputValue = inputValue.replace(/[^0-9-]/g, '');
    
    // 第二步：按短横线拆分，约束各部分长度
    let valueParts = inputValue.split('-');
    
    // 第一部分（前半段数字）最多11位
    if (valueParts[0].length > 11) {
      valueParts[0] = valueParts[0].slice(0, 11);
    }
    
    // 处理短横线后的内容：最多保留1个短横线，且后半段最多11位数字
    if (valueParts.length > 2) {
      // 超过1个短横线时，合并后续内容并只保留数字，截取前11位
      valueParts[1] = valueParts.slice(1).join('').replace(/[^0-9]/g, '').slice(0, 11);
      valueParts = [valueParts[0], valueParts[1]];
    } else if (valueParts.length === 2) {
      // 后半段只保留数字，最多11位
      valueParts[1] = valueParts[1].replace(/[^0-9]/g, '').slice(0, 11);
    }
    
    // 重新拼接成合法内容，放回输入框
    $(this).val(valueParts.join('-'));
  });

  // 可选：失去焦点时的格式校验（提示用户输入规范）
  $('#contact').on('blur', function() {
    const finalValue = $(this).val();
    // 正则规则：要么是11位数字，要么是11位数字+短横线+11位数字
    const validPattern = /^(\d{11}|\d{11}-\d{11})$/;
    
    if (finalValue && !validPattern.test(finalValue)) {
      alert('请输入正确格式，例如：03123456789 或 03123456789-03987654321');
      // 也可以选择清空输入框：$(this).val('');
    }
  });
});

代码解释 #

• replace(/[^0-9-]/g, '')：强制过滤掉所有非数字、非短横线的字符，避免用户输入无效内容
• 拆分短横线后分别约束长度：确保前半段最多11位，后半段最多11位，且只能有1个短横线
• blur事件的校验是可选增强：在用户输入完成后，提示是否符合最终格式规范

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