HTML表单输入框限制仅允许英国国际号码格式

直接上可运行的完整示例，兼顾格式强制限制和用户输入易用性：

<form id="phoneForm">
  <label for="ukPhone">英国国际格式手机号:</label>
  <input 
    type="tel" 
    id="ukPhone" 
    name="ukPhone"
    placeholder="+447123456789"
    pattern="^\+447\d{9}$"
    maxlength="13"
    required
  >
  <button type="submit">提交</button>
</form>

<script>
const phoneInput = document.getElementById('ukPhone');

// 过滤非法输入，仅允许开头的+和数字
phoneInput.addEventListener('input', function(e) {
  let value = e.target.value;
  // 保留开头的+，其余只留数字
  let filtered = value.replace(/(?!^\+)[^\d]/g, '');
  // 如果输入以07开头，自动替换为+447
  if (filtered.startsWith('07')) {
    filtered = '+44' + filtered.slice(1);
  }
  // 限制长度不超过13位
  if (filtered.length > 13) {
    filtered = filtered.slice(0, 13);
  }
  e.target.value = filtered;
});

// 表单提交验证
document.getElementById('phoneForm').addEventListener('submit', function(e) {
  const isValid = phoneInput.checkValidity();
  if (!isValid) {
    e.preventDefault();
    alert('请输入正确的英国国际格式手机号，示例：+447123456789');
  }
});
</script>

核心功能说明 #

• HTML原生验证：

  • pattern="^\+447\d{9}$"：强制匹配+447开头，后跟9位数字的格式，彻底拦截空格或其他非法字符
  • maxlength="13"：限制总长度为13位（+447占4位，9位数字占9位）
  • type="tel"：唤起移动端数字键盘，降低输入错误率
  • required：确保输入框不为空

• JavaScript增强易用性：

  • 自动过滤非数字和非开头的+，避免用户误输入无效字符
  • 自动将用户习惯输入的07xxxxxxxxx格式转换为+447xxxxxxxxx，无需用户手动输入国际前缀
  • 实时限制输入长度，防止超出格式要求

验证规则说明 #

• 合法格式示例：+447123456789
• 非法格式拦截：
  • 带空格的07655 123456（自动过滤空格并转换为合规格式，若长度符合则保留）
  • 非+447开头的号码（比如+448xxxxxxxxx会被HTML pattern直接拦截）
  • 长度不足或超过13位的输入

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