不能直接当整数用，因其允许小数、负数、空值及科学计数法；需组合pattern+inputmode做基础拦截，再用input事件实时过滤，最终提交前调用number.isinteger(number(str.trim()))校验。
input type="number" 为什么不能直接当整数用
因为 type="number 允许输入小数、负号、甚至空值或科学计数法（如 1e2），浏览器不会自动拒绝 3.14 或 -5 —— 它只校验是否为“有效数字”，不是“有效整数”。更麻烦的是，某些浏览器（如 Safari）对 step="1" 的支持不一致，step 缺省值是 1，但没显式声明时部分 UA 不触发整数约束。
用 pattern + inputmode 实现客户端基础拦截
纯 HTML 层最轻量的整数限制方式是组合 pattern 和 inputmode，它不依赖 JS，且对移动端键盘有实际影响：
<input type="text" inputmode="numeric" pattern="-?[0-9]*" title="请输入整数">
注意几点：
-
inputmode="numeric"让手机弹出数字键盘（含负号），但不阻止粘贴； -
pattern="-?[0-9]*"允许空字符串和负号开头，适合可选字段；若要求必填且非负，改用pattern="[0-9]+"； -
title是用户 hover 或 invalid 时的提示，不可省略，否则报错无反馈； - 该方案不防粘贴非数字内容（如
"abc"），需配合input事件进一步过滤。
监听 input 事件实时过滤非法字符
仅靠 pattern 不够，用户仍可粘贴、拖拽或用开发者工具绕过。必须用 JS 在输入时清理：
<input id="int-input" type="text"><script>
const el = document.getElementById('int-input');
el.addEventListener('input', () => {
// 先取原始值，再只保留：负号（仅开头）、数字
const raw = el.value;
const cleaned = raw.replace(/[^-\d]/g, '').replace(/^-+([-\d]*)$/, '-$1').replace(/^(-?)0+(?=\d)/, '$1');
if (cleaned !== raw) el.value = cleaned;
});
</script>
这段逻辑处理了几个典型问题：
- 多次输入
-（如--5→-5）； - 开头多个
0（如007→7），但保留单独的0； - 中间或末尾的非数字字符（
1a2b3→123）； - 不触发
change事件，所以表单提交前还得额外校验值是否为有效整数（比如空字符串或孤负号要报错）。
提交前用 Number.isInteger() 做最终判定
前端所有过滤都只是体验优化，后端永远要重新校验。但前端提交前必须做一次可靠判断，不能只看 value 是否匹配正则 —— 因为 "123" 是字符串，Number("123") 是数字，但 Number("123.0") 也是 123，而它不是整数字符串。
正确做法是：
- 先
trim()去首尾空格； - 再用
Number()转换，避免parseInt("123abc") === 123这种误判； - 最后用
Number.isInteger()判定结果是否为整数类型。
示例：
function isValidInteger(str) {
const n = Number(str.trim());
return !isNaN(n) && Number.isInteger(n);
}
// isValidInteger(" -42 ") → true
// isValidInteger("123.0") → false
// isValidInteger("") → false
这个函数才是你提交表单前该调用的校验入口。别漏掉 trim()，空格在粘贴场景下太常见了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
