QQ号合法范围是5–12位纯数字且不以0开头，正则应为^[1-9]\d{4,11}$；HTML需用type="text"配合pattern属性，title必填；blur事件校验更及时；后端须trim并字符串匹配。
QQ号的合法范围和校验边界在哪
QQ号不是任意数字，它有明确的规则：5–12位纯数字，且不能以0开头。早期QQ号从10001起，现在上限约10位数（但官方未封死12位），所以不能只用/^\d{5,12}$/——它会放过012345这种非法值。
真正可靠的正则应是：^[1-9]\d{4,11}$。注意两点：
• ^和$必须显式写出（HTML的pattern属性会自动包裹，但JS里test()不会）
• {4,11}是因为首位已占1位，剩下最多11位，合起来就是5–12位
HTML原生pattern怎么写才生效
pattern对type="text"有效，但对type="number"完全无效——浏览器会忽略它。所以QQ号输入框必须用type="text"，否则pattern形同虚设。
- 正确写法：
<input type="text" name="qq" pattern="[1-9]\d{4,11}" title="请输入5–12位非零开头的QQ号" required> -
title属性必须配，否则校验失败时只显示“请与所要求的格式匹配”，用户看不懂 - 别写
^[1-9]\d{4,11}$——Chrome会报Invalid regular expression，因为浏览器自动加了^和$ - 移动端键盘会弹出数字键盘（因
inputmode="numeric"可进一步优化，但非必需）
为什么blur事件校验比submit更实用
用户填完QQ号就切走，你希望立刻提示错误，而不是等点提交按钮才爆红。这时blur比submit更贴近真实交互。
立即学习“前端免费学习笔记（深入）”；
关键操作有三步：
- 监听
blur，调input.checkValidity()触发原生校验逻辑 - 失败时手动调
input.setCustomValidity("QQ号格式不对")，否则默认提示太模糊 - 成功时必须调
input.setCustomValidity("")清空状态，否则后续提交永远卡住
示例代码片段：
const qqInput = document.querySelector('input[name="qq"]');
qqInput.addEventListener('blur', () => {
if (!/^[1-9]\d{4,11}$/.test(qqInput.value)) {
qqInput.setCustomValidity('QQ号必须是5–12位，且不能以0开头');
} else {
qqInput.setCustomValidity('');
}
});
后端校验容易漏掉的两个细节
前端再严，后端也得重验。但常被忽略的是：
- 字符串前后空格——
" 12345 "过不了pattern，但可能绕过JS校验（尤其用value.trim()没写全时）；后端必须先trim()再正则匹配 - 超长数字转为科学计数法——Node.js或PHP中，若把输入当数字解析（如
parseInt(req.body.qq)），12位QQ号可能变成1.2345e+11，再转字符串就崩了；务必按字符串处理
最稳妥的后端判断就是：typeof input === 'string' && /^[1-9]\d{4,11}$/.test(input.trim())。别信任何“前端已校验”的假设。
