正则表达式需求：仅允许带负号的纯数字且仅单个前导零

问题核心 #

你需要的规则是：仅允许纯数字（可带负号），仅允许单个前导零，同时禁止-0、0123、-012这类非法格式。之前的正则无法支持实时输入的关键原因是没考虑输入过程中的中间合法状态（比如输入负号后还未输入数字的情况），导致输入-时直接被拦截，无法继续输入后续数字。

适配实时验证的正则表达式 #

针对最终合法值的正则（用于提交时验证）：

^(0|-?[1-9]\d*)$

用于实时输入验证的正则（兼容输入过程中的中间状态，比如单独的-）：

^(-)?(0|[1-9]\d*)?$

这个正则允许的场景包括：

• 空字符串（初始输入状态）
• 单独的-（输入负号后的过渡状态）
• 最终合法值：0、123、-555等

修正后的验证代码 #

function(evt) {
    evt = evt || window.event;
    const key = evt.key;
    // 放行必要的控制键（退格、删除、方向键等）
    if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) {
        return true;
    }
    const currentValue = evt.target.value.trim();
    const expect = currentValue + key;
    // 使用兼容中间状态的正则验证
    if (!/^(-)?(0|[1-9]\d*)?$/.test(expect)) {
        evt.preventDefault();
    } else {
        return true;
    }
}

代码说明 #

1. 控制键放行：避免退格、方向键等必要操作被拦截，保证输入体验
2. 中间状态兼容：允许单独输入-，用户可以先输入负号再补充数字
3. 最终格式保障：完成输入后，最终值必然符合0、-?[1-9]\d*的规则，不会出现-0、0123这类非法格式

验证效果 #

• 合法输入：0、12345、-555、先输-再输5得到-5
• 非法输入拦截：-0、0123、-012、输0后再输1会被阻止

内容的提问来源于stack exchange，提问作者Trag