JavaScript 中限制输入框小数点前后最多两位数字的正则校验与实时防护-html教程-PHP中文网

JavaScript 中限制输入框小数点前后最多两位数字的正则校验与实时防护

本文详解如何使用 javascript 正则表达式 + 事件监听，实现 html 输入框中“小数点前最多 2 位、小数点后最多 2 位”的严格数值格式控制，并提供可直接运行的防误输入方案。

本文详解如何使用 javascript 正则表达式 + 事件监听，实现 html 输入框中“小数点前最多 2 位、小数点后最多 2 位”的严格数值格式控制，并提供可直接运行的防误输入方案。

在金融、利率、精度敏感型表单（如年化利率、折扣率）中，常需约束用户仅能输入形如 1.05、12.78 的数值——即整数部分 ≤ 2 位、小数部分 ≤ 2 位，且整体最多含一个小数点。注意：题目中“not more than 4 digit before decimal and after decimal point”实为表述歧义，结合示例（122.45 不接受）及业务逻辑，实际需求是 小数点前最多 2 位、小数点后最多 2 位（共最多 4 位有效数字，但结构受限），而非总位数不超过 4。

✅ 合法输入示例：

1.05（1 位整数 + 2 位小数）
12.05（2 位整数 + 2 位小数）
12.78（2+2）
7 或 0.5（允许无小数点或单边存在）

❌ 非法输入示例：

122.45（整数部分超 2 位）
12.789（小数部分超 2 位）
122..45（双小数点，非法语法）
.5（缺少整数位，若业务要求必须有整数位则需额外校验）

核心正则表达式：

OpenJDK 24

下载

/^\d{0,2}(?:\.\d{0,2})?$/

^ 和 $：确保匹配整个字符串，防止部分匹配；
\d{0,2}：整数部分为 0–2 个数字（支持空整数位，如 .5；若需强制至少 1 位整数，改为 \d{1,2}）；
(?:\.\d{0,2})?：非捕获组，表示「可选的小数点 + 0–2 位小数」；
整体含义：整数部分 0–2 位，小数部分（含小数点）0–3 字符（. + 最多 2 数字），且小数点至多出现一次。

完整实现代码（兼容 jQuery）：

<input type="text" id="numberInput" style="width:210px; text-align:right;">

let lastValid = ''; // 缓存上次合法值
$("#numberInput").on("keypress keyup blur", function (event) {
    const value = $(this).val();
    // 允许删除、退格、方向键等非数字操作（避免阻断光标移动）
    if (event.type === 'keypress' && !/[0-9.]/.test(String.fromCharCode(event.which))) {
        event.preventDefault();
        return;
    }
    // 主校验：匹配正则
    if (/^\d{0,2}(?:\.\d{0,2})?$/.test(value)) {
        lastValid = value;
    } else {
        event.preventDefault();
        $(this).val(lastValid); // 拒绝非法输入，回滚到上一合法状态
    }
});

⚠️ 关键注意事项：