本文介绍一种基于正则表达式的实时输入校验方案，用于限制文本框中只能输入合法的数字（范围 ≥ -1），要求负号（-）仅允许出现在字符串最前端，小数点最多出现一次，且禁止非法字符。
本文介绍一种基于正则表达式的实时输入校验方案，用于限制文本框中只能输入合法的数字（范围 ≥ -1），要求负号（`-`）仅允许出现在字符串最前端，小数点最多出现一次，且禁止非法字符。
在表单开发中，仅依赖 HTML 的 type="number" 和 min="-1" 属性并不足以实现严格的实时输入控制——用户仍可通过粘贴、拖拽或手动输入（如 -2、--1、1.2.3 或 1-5）绕过限制。因此，需结合 JavaScript 与精心设计的正则表达式，在 input 事件中动态清洗并规范用户输入。
核心目标有三：
✅ 允许合法数字：0、-1、-0.5、0.99、1 等；
❌ 禁止非法格式：-2（小于 -1）、--1（多个负号）、1-5（负号不在开头）、1.2.3（多个小数点）、abc（非数字字符）；
✅ 自动修正：即时移除违规字符，而非仅做提交校验。
推荐方案：单次正则替换 + 小数点去重
以下正则表达式在一个 replace() 调用中完成三项清理任务：
[^0-9.\n-]+|^-0*(?:1\.0*[1-9]|[2-9]|1\d+).*|(?!^)-
匹配逻辑解析：
- [^0-9.\n-]+：匹配所有非法字符（除数字、.、换行符、- 外的任意字符）；
- |：或；
- ^-0*(?:1\.0*[1-9]|[2-9]|1\d+).*：匹配以 - 开头、但超出 -1 下限的数值（如 -2、-1.01、-10），其中：
- ^-0* 匹配开头的 - 和可选前导零；
- (?:1\.0*[1-9]|[2-9]|1\d+) 匹配 1.后跟非零小数、或 ≥2 的整数、或 ≥10 的整数；
- |：或；
- (?!^)-：匹配不在字符串开头的任意 -（即中间或末尾的负号）。
随后，再用 replace(/(\..*)\./g, '') 确保小数点仅出现一次。
完整可运行代码
<input type="text" id="mynumber" placeholder="请输入 ≥ -1 的数字（如：-1, -0.5, 0, 0.99）">
function handleInput() {
this.value = this.value
.replace(/[^0-9.\n-]+|^-0*(?:1\.0*[1-9]|[2-9]|1\d+).*|(?!^)-/g, '')
.replace(/(\..*)\./g, '$1');
}
const inp = document.getElementById("mynumber");
if (inp) {
inp.addEventListener("input", handleInput);
}
进阶优化（支持现代浏览器）
若目标环境支持 JavaScript 正向/负向后行断言（Chrome 88+、Firefox 78+、Safari 16.4+），可合并为单次替换，提升可读性与性能：
function handleInput() {
// 单次正则：清除非法字符、越界值、非首负号、多余小数点
this.value = this.value.replace(
/[^0-9.\n-]+|^-0*(?:1\.0*[1-9]|[2-9]|1\d+).*|(?!^)-|(?<blockquote>
<p>⚠️ 注意事项： </p>
<ul>
<li>该方案不替代服务端校验，仅作用户体验增强； </li>
<li>min="-1" 属性在 type="text" 下无效，故已移除，逻辑完全由 JS 控制； </li>
<li>若需支持科学计数法（如 -1e-2），需大幅扩展正则逻辑，建议改用 parseFloat() + 数值判断； </li>
<li>对于无障碍（a11y）和国际化场景（如逗号小数点），应结合 Intl.NumberFormat 进一步处理。</li>
</ul>
</blockquote><p>通过上述正则组合与事件监听，即可精准实现“负号仅限开头”与“数值 ≥ -1”的双重约束，兼顾健壮性与用户体验。</p>
