如何用jQuery在用户输入第11位时校验HTML手机号是否合法

首先确保页面已经引入jQuery库，直接添加如下代码即可实现需求：

$('#phoneNumber').on('input', function() {
  // 过滤非数字字符，避免用户输入字母、符号等无效内容
  let inputVal = $(this).val().replace(/\D/g, '');
  $(this).val(inputVal);

  // 输入长度达到11位时自动触发校验
  if (inputVal.length === 11) {
    // 国内手机号码正则规则：1开头，第二位为3-9，后接9位数字
    const phoneRule = /^1[3-9]\d{9}$/;
    if (phoneRule.test(inputVal)) {
      // 校验通过的自定义逻辑，可替换为你的业务代码
      $(this).css('border', '1px solid #00b42a');
      console.log('手机号格式合法');
    } else {
      // 校验不通过的自定义逻辑，可替换为你的业务代码
      $(this).css('border', '1px solid #f53f3f');
      console.log('请输入合法的手机号');
    }
  } else {
    // 长度不足11位时重置输入框样式
    $(this).css('border', '1px solid #ccc');
  }
})

补充说明 #

• 选用input事件监听比keyup覆盖场景更全面，兼容粘贴输入、右键插入等非键盘输入的场景
• 提前过滤非数字的逻辑可以根据业务需求调整，如果允许用户输入空格、横杠等分隔符，去掉过滤逻辑后调整正则即可
• 校验通过/失败的提示逻辑仅为示例，你可以替换为页面内嵌提示、气泡提示等更友好的交互形式

内容的提问来源于stack exchange，提问作者M.imp