HTML input 的 pattern 属性对 type="number" 无效，必须用 type="text" 才生效；需结合 oninput/onpaste 实时校验负数与小数位，并在 submit 时用 JS + setCustomValidity 做最终验证。
HTML input 的 pattern 属性不支持负号直接校验
HTML 原生 <input type="text"> 的 pattern 属性只在提交时触发（且仅对 type="text"、"search"、"tel" 等非数字类型生效），而 type="number" 会忽略 pattern —— 所以你写 pattern="-?\d+(\.\d+)?" 对 type="number" 完全无效。
常见错误现象：<input type="number" pattern="-?\d+(\.\d+)?"> 看似写了正则，但浏览器根本不读它，连控制台警告都没有。
- 要用
pattern，必须配合type="text"，并手动确保值可被解析为数字（比如后续 JS 转换） - 如果需要原生的负数输入 + 实时反馈，
type="number"是更稳妥的选择，但得靠 JS 补足校验逻辑 -
pattern中的正则不能带^和$（HTML 自动锚定整个字符串）
用 type="number" + oninput 实现实时负数校验
这是最实用的组合：利用浏览器对 type="number" 的基础解析能力（自动过滤非法字符、支持上下箭头、- 号输入），再用 oninput 拦截并修正超出范围或格式异常的值。
例如限制「允许负数，且最多 1 位小数」：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<input type="number" step="0.1" oninput="
const v = this.value;
if (v && !/^-?\d*\.?\d{0,1}$/.test(v)) {
this.value = v.slice(0, -1);
}
">-
step="0.1"让上下箭头按 0.1 步进，也暗示允许一位小数 - 正则
^-?\d*\.?\d{0,1}$允许空字符串、负号开头、小数点可选、小数点后最多一位数字 - 直接用
v.slice(0, -1)回退最后一位，比setCustomValidity更顺滑（避免红色气泡打断输入流） - 注意：该正则不阻止用户粘贴
--12或1.23.4，所以需额外处理onpaste（见下一点）
粘贴内容必须单独拦截，否则正则校验失效
用户 Ctrl+V 粘贴时，oninput 不足以覆盖所有情况——比如粘贴 -12.34.56 或 abc-7，浏览器可能先塞进输入框再触发事件，导致非法值短暂可见。
解决方案：给 onpaste 绑定处理函数，提前清洗粘贴内容：
<input type="number" onpaste="event.preventDefault();
const text = (event.clipboardData || window.clipboardData).getData('text');
const cleaned = text.replace(/[^-\d.]/g, '').replace(/(\..*)\./g, '$1');
this.value += cleaned;
">-
[^-\d.]删除所有非数字、非负号、非小数点字符 -
(\..*)\.确保最多一个小数点（匹配第一个小数点后的任意内容，再跟第二个小数点，替换成第一个小数点及后面内容） - 注意：不要直接
this.value = cleaned，否则会清空原有输入；用+=是为了保留光标位置语义（实际中建议用setSelectionRange配合更精确控制）
真正要严谨校验，还是得靠 submit 时的 JS + setCustomValidity
前端正则只是体验层防护。用户禁用 JS、绕过输入直接改 DOM、或用 curl 提交表单时，一切 pattern/oninput 都失效。最终校验必须落在提交时刻。
推荐模式：
form.addEventListener('submit', e => {
const input = document.querySelector('input[name="amount"]');
const num = Number(input.value);
if (isNaN(num) || num < -999999 || num > 999999) {
input.setCustomValidity('请输入有效数字，范围 -999999 ~ 999999');
e.preventDefault();
} else {
input.setCustomValidity('');
}
});-
Number()能正确解析"-12.3"，也能把"12..3"或"abc"转成NaN -
setCustomValidity为空字符串时，才允许提交；非空时会阻断并显示提示 - 别依赖
input.validity.valid判断——它受required、min/max等影响，和你的业务规则未必一致
负数校验里最容易被忽略的点：小数点位置、重复符号、科学计数法（如 -1e3）。如果你的业务明确不需要 e 记法，就在正则或 Number() 后加一层 !/\de[+-]?\d+/i.test(value) 过滤。
