如何在HTML输入框中使用pattern验证特定格式的手机号？

问题根源 #

1. 输入类型冲突：type="number" 会自动去除输入的前导零，且浏览器对number类型输入的pattern属性支持不完善，无法正常触发格式验证。
2. 正则长度错误：原正则(09)[0-9]{11}要求总长度为13位（2位前缀+11位数字），和你需要的11位手机号不符。

修正后的代码 #

<input class="form-design" name="phone" type="text" id="phone" pattern="09[0-9]{9}" placeholder="Phone Number*" required>

核心调整说明 #

• 替换type="number"为type="text"：保留输入的前导零，同时让pattern属性正常生效。
• 修正正则规则：09[0-9]{9} 严格匹配以09开头、后续接9位数字的格式，总长度恰好11位。
• 可选体验优化：添加inputmode="tel"，让移动端自动弹出数字键盘：

<input class="form-design" name="phone" type="text" id="phone" pattern="09[0-9]{9}" placeholder="Phone Number*" required inputmode="tel">

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