如何限制电话号码输入框内特定字符的数量与输入位置

核心逻辑梳理 #

你需要实现的规则对应如下处理逻辑：

• 仅允许首字符为+，其余位置所有+自动过滤移除
• 开头支持二选一：+ 或者 00
• 其余输入位置仅允许输入数字

实时输入过滤实现（原生JS） #

前端实时拦截非法输入的代码示例如下：
首先声明输入框：

<input type="tel" id="phoneInput" placeholder="请输入电话号码" maxlength="20">

绑定输入事件做实时处理：

const phoneInput = document.getElementById('phoneInput');
phoneInput.addEventListener('input', function() {
  let inputVal = this.value;
  // 移除所有非首字符位置的+
  if (inputVal.startsWith('+')) {
    inputVal = '+' + inputVal.slice(1).replace(/\+/g, '');
  } else {
    inputVal = inputVal.replace(/\+/g, '');
  }
  // 可选：过滤除了数字之外的所有非法字符（首字符的+已经保留）
  inputVal = inputVal.replace(/(?<=.)\D/g, '');
  this.value = inputVal;
});

格式校验规则 #

提交前可以用正则校验整体格式是否合法：
/^(\+|00)\d{1,}$/
该正则匹配规则：

• 以+或者00作为开头
• 后续内容全部为数字，至少存在1位

常见优化点 #

• type="tel"属性会在移动端唤起数字键盘，降低用户输入错误概率
• 上述逻辑已经覆盖粘贴场景，粘贴的内容中如果包含非首位置的+会自动移除，无需额外监听粘贴事件
• 可以根据你的业务要求调整maxlength属性限制号码最大输入长度

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