html input 的 pattern 属性无法准确校验负数，因其仅在提交时触发、不拦截实时输入或粘贴，且对 type="number" 无效；可靠方案是 type="number" 结合 paste 拦截与 blur 时正则兜底。
HTML input 的 pattern 属性不支持负数校验的完整逻辑
直接在 <input pattern> 里写正则想“准确校验负数输入”会失败——因为 pattern 只在表单提交时触发，且不监听实时输入、不处理空值或中间态（比如用户刚输了个 -，还没输数字），更不阻止非法字符粘贴。它本质是提交前的轻量断言，不是输入控制。
常见错误现象：pattern="-?\d+(\.\d+)?" 看似能匹配 -12.3，但用户输入 - 后焦点离开，浏览器认为合法（因为 - 本身不触发验证）；粘贴 -abc 也能通过，因为 pattern 不校验非数字字符是否混入。
-
pattern对type="number"无效（浏览器会忽略） - 对
type="text"有效，但无法阻止-单独存在或--1这类非法格式 - 移动端软键盘可能不弹出数字键盘（
type="text"下）
用 JavaScript 实时拦截负数输入的边界情况
真正可控的方式是监听 input 或 keydown 事件，结合 setSelectionRange 修正光标位置。关键不是“匹配负数”，而是“只允许合法数字字符 + 单个前置负号”。
核心判断逻辑：value 必须满足：以可选 - 开头，后跟 0–9 和最多一个 .，且小数点不能在开头或负号后立即出现（即 -. 不合法）。
- 允许：
-12、-0.5、3.14 - 拒绝：
-（无数字）、--1、-.5、-1.2.3、1-2 - 粘贴内容需用
event.clipboardData.getData('text')提前过滤，再event.preventDefault() - 注意
input事件中this.value是修改后值，适合做二次清洗；keydown更早，适合拦截按键（如禁用e.key === 'e'或'+'）
type="number" 的负数支持与隐藏陷阱
原生 <input type="number"> 天然支持负数，但有三个容易被忽略的兼容性/行为问题：
- Firefox 不支持
step="any"时输入小数（会四舍五入到整数），需显式设step="0.01"或类似值 - Safari 在 iOS 15.4 前不触发
input事件于手动删除负号后（比如从-5删成-，事件不冒泡） - 所有浏览器都允许粘贴
1e3这类科学计数法，但parseFloat(value)会解析成功，而业务可能只要十进制 - 若需禁止科学计数法，得在
change或blur时用正则/^-?\d+\.?\d*$/再校验（注意.0和1.的合法性）
推荐组合方案：type="number" + blur 时正则兜底 + paste 拦截
兼顾体验与健壮性，不要只押注一种机制。重点不是写出最短正则，而是覆盖用户真实操作路径。
示例关键代码片段：
<input type="number" id="numInput" step="0.01"><script>
const el = document.getElementById('numInput');
el.addEventListener('paste', e => {
const text = e.clipboardData.getData('text');
if (!/^-?\d*\.?\d+$/.test(text)) e.preventDefault();
});
el.addEventListener('blur', () => {
if (el.value && !/^[-+]?\d*\.?\d+$/.test(el.value)) {
el.value = ''; // 或提示
}
});
</script>
注意 [-+]? 允许正号（虽然少见），\d*\.?\d+ 确保至少一位数字（排除 -.），blur 而非 input 是因为后者在 Safari 中对负号删除不可靠。
真正难的不是写对正则，而是想清楚：用户在哪一步可能输入非法内容？浏览器在哪个环节悄悄放行了？这些地方必须补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
