能，但必须用 type="text" 或 type="search" 配合 pattern="^[0-9]+$"，type="number" 会忽略 pattern；需服务端二次校验数值范围与精度，并用 inputmode="numeric" 提示数字键盘。
input 的 pattern 属性能直接校验无符号整数吗
能，但必须配合 type="text" 或 type="search" 使用；type="number" 会忽略 pattern，浏览器根本不触发正则校验。
原因很简单：HTML 规范里明确写了 pattern 只对表单控件的「文本型输入」生效，而 number 类型走的是数值解析逻辑，连字符串都没进校验管道。
-
<input type="number" pattern="^\d+$">—— 完全无效，提交时不会提示错误 -
<input type="text" pattern="^\d+$">—— 有效，空格、负号、小数点都会被拦住 - 注意开头结尾锚点
^和$必须写全，否则"abc123def"这种也会通过
正则写成 ^\d+$ 还是 ^[0-9]+$
两者在 ASCII 范围内等价，但 \d 在某些浏览器（如旧版 Safari）可能匹配 Unicode 数字字符（比如阿拉伯数字 ١٢٣），导致非预期通过。生产环境更推荐 ^[0-9]+$，语义明确、行为稳定。
还要注意：这个正则不允许空字符串，也不允许前导零（比如 "007"）。如果业务允许前导零，就得改成 ^[0-9]*$，但这时得额外处理空值——因为 * 会让空输入也合法。
立即学习“前端免费学习笔记（深入）”；
- 严格无符号整数（不允许空、不允许前导零）：用
^[1-9][0-9]*$ - 允许零但不允许前导零（即
"0"合法，"01"不合法）：用^0$|^[1-9][0-9]*$ - 只要求纯数字、允许空：用
^[0-9]*$，但必须搭配required属性控制非空
为什么用 pattern 校验后仍要服务端再验
因为 pattern 完全依赖客户端 JavaScript 引擎和浏览器实现，用户禁用 JS、绕过表单提交、或用 curl/postman 直接发请求，都能跳过它。
更隐蔽的问题是：pattern 只校验输入值的字符串形式，不校验数值范围。比如 "99999999999999999999" 在 JS 里已经超过 Number.MAX_SAFE_INTEGER，转成数字会丢失精度，但 pattern 照样放行。
- 前端只做快速反馈，降低用户误操作成本
- 后端必须用语言原生整数类型解析，并检查是否溢出、是否为 NaN、是否在业务要求范围内（如 ID 不能超过 2^31-1）
- 别信
parseInt(inputValue)的返回值——它遇到"123abc"会返回123，而pattern已经拦掉了这种输入，但服务端仍需用严格解析（如Number()+Number.isInteger()）
移动端软键盘怎么自动弹出数字键盘
仅靠 pattern 不行，得靠 inputmode + type 组合。iOS 和 Android 都支持 inputmode="numeric"，但必须搭配 type="text" 才生效（type="number" 会强制用系统数字键盘，但又废掉 pattern）。
所以最终推荐写法是：
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="10" required>
这里 maxlength 是防用户粘贴超长数字串导致卡顿，required 补上空值约束。注意 inputmode="numeric" 不是校验手段，只是提示键盘类型，不影响提交逻辑。
真正容易被忽略的是：不同安卓厂商对 inputmode 支持度不一，华为/小米部分机型仍可能弹出全键盘。所以视觉反馈（比如输入后实时显示“格式错误”）比键盘类型更重要。
