HTML input 本身不支持纯数字正则校验，pattern仅提交时校验且误判多；须用input事件+/\D/g实时过滤，禁用keypress，type="number"也不可靠。
HTML input 本身不支持正则校验纯数字
HTML 的 pattern 属性确实能配合正则做前端校验，但它校验的是字符串匹配，不是“纯数字”语义——比如 "0123"、"00"、"+123"、"1e5" 都可能被误判。更关键的是：pattern 不阻止用户输入非数字字符，只在表单提交时触发提示，且对空格、全角数字、Unicode 数字（如阿拉伯数字 ١٢٣）完全无感。
真正要“纯数字输入”，得靠 JavaScript 实时拦截 + 合理正则配合。HTML 层只能辅助（比如设 type="text" 避免移动端弹出字母键盘，或用 inputmode="numeric" 提示数字键盘）。
用 input 事件 + /^\d+$/ 实时过滤最稳妥
别用 keypress（已废弃）、也别只靠 pattern。监听 input 事件，在值变更后立刻清洗：
<input type="text" id="numInput"><script>
const el = document.getElementById('numInput');
el.addEventListener('input', () => {
// 只保留数字字符，再去除开头连续的 0（可选）
el.value = el.value.replace(/\D/g, '');
// 可选：防止全为 0 后留空（如用户输 '000' → 清空后变 ''）
if (el.value === '' || el.value === '0') return;
});
</script>
-
/\D/g比/[^0-9]/g更简短，且能清除所有非数字 Unicode 字符（包括全角数字、中文数字等） - 不用
parseInt或Number()转换，避免隐式类型转换带来的边界问题（如"012"→12） - 不要在
keydown中preventDefault()，会破坏粘贴、快捷键、输入法组合等正常行为
如果必须用 pattern，正则写成 ^\d+$ 并加 required
仅用于提交前兜底校验，不能替代 JS 过滤。注意三点：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
pattern值不带斜杠，直接写^\d+$（不是/^\d+$/） - 必须加
required，否则空值会跳过pattern校验 - 移动端 Safari 对
pattern支持弱，部分机型不触发提示；Chrome 会显示英文默认提示，无法自定义 - 这个正则仍允许
"0000"，如果你需要“非零开头的正整数”，得用^[1-9]\d*$
警惕这些常见坑
很多人卡在细节上：
-
type="number"看似合理，但允许输入e、+、-、.，且在某些浏览器中value返回空字符串而非""，导致校验失效 - 用
parseInt(val, 10)判断是否为数字？错——parseInt("12a", 10)返回12，看似成功，实际输入非法 - 正则写成
^\d*$？那空字符串也合法，不符合“纯数字输入”的业务意图（通常要求至少一位） - 没处理粘贴场景：用户右键粘贴
"abc123def"，仅靠input事件 +replace就能干净截断，无需额外监听paste
真正难的不是写正则，而是想清楚你要拦什么：是“用户不能输字母”，还是“值必须可安全转成 JS number”，或是“后端只接受无前导零的正整数”。每种需求对应的正则和 JS 处理逻辑都不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
