正则如何实现手机号输入限制：首字符仅数字或+，其余仅为数字

最终实现代码 #

JavaScript 逻辑调整 #

function main() {
  let phone = document.getElementById('phone');
  let inputVal = phone.value;
  // 第一步：清除所有非数字、非+的非法字符
  inputVal = inputVal.replace(/[^+0-9]/g, '');
  // 第二步：清除首字符之后出现的所有+号
  if (inputVal.length > 1) {
    inputVal = inputVal[0] + inputVal.slice(1).replace(/\+/g, '');
  }
  phone.value = inputVal;
  console.log(phone.value);
}

HTML 优化（可选） #

如果需要输入时实时自动校验，不需要点击按钮触发，可以直接绑定input事件，使用体验更流畅：

<input id="phone" oninput="main()">

规则校验逻辑说明 #

• 第一步正则/[^+0-9]/g会全局匹配所有不是+也不是数字的字符，直接替换为空，过滤掉字母、特殊符号等所有非法内容
• 第二步针对长度大于1的输入内容，仅保留首字符可能存在的+，后续所有位置的+全部清除，完全满足首字符仅允许为数字或+、下标1及之后仅允许输入数字的要求

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