JavaScript实现价格输入校验：强制保留两位小数

巷口听风

发布时间：2026-10-14 | 4人浏览过

原创

在前端表单提交场景中，直接依赖后端校验往往体验不佳且增加服务器压力。通过JavaScript利用正则表达式对价格字段进行前置拦截，可以确保输入内容严格符合"合法数字、最多两位小数"的业务要求。本文将演示如何编写健壮的正则规则，并结合JQuery实现简单的点击验证交互。

核心逻辑与准备

要实现价格合法性校验，关键在于构建能够匹配目标数值格式的正则表达式。本方案旨在覆盖以下场景：

非空检查：防止用户提交空白数据。
数字格式：允许整数部分为 0 或任意正整数（前导零通常不被推荐，但需处理如 0.50 的情况）。
小数精度：小数点后必须且最多只能有两位数字（例如 .1 视为 0.10 或非法，此处逻辑倾向于 X.XX 或 X）。
符号支持：根据代码实例，允许正负号，但实际商品价格通常为正数。

为了快速演示交互效果，我们引入 JQuery 库来简化DOM操作和事件绑定。

第1步：构建HTML结构

创建一个文本输入框用于录入价格，以及一个按钮触发验证逻辑。使用清晰的ID以便脚本定位。

<label>请输入价格：</label>
<input type="text" id="txtProPrice" />
<input type="button" value="验证输入" id="btnTest" />

第2步：编写JavaScript正则校验规则

正则表达式是本题的核心。我们需要一个模式来区分“纯整数”和“带小数的数字”。以下代码中的正则逻辑如下：

(^[-+]?[1-9]\d*(\.\d{1,2})?$)：匹配以1-9开头的整数，后面可跟可选的小数部分（1到2位）。
(^[-+]?[0]{1}(\.\d{1,2})?$)：匹配以0开头，且后接小数部分（1到2位）的数字，用于处理 0.50 这类情况。

JS完整实现代码：

<script src="jquery.js"></script>
<script type="text/javascript">
    // 定义价格校验函数
    function ckProPrice() {
        var inputVal = $("#txtProPrice").val();
        
        // 1. 非空判断
        if (inputVal == "") {
            alert("商品价格不能为空！");
            return false;
        }
        
        // 2. 正则匹配
        // 解释：支持正负号 | 非零开头整数可选小数 | 零开头必带小数
        var reg = /(^[-+]?[1-9]\d*(\.\d{1,2})?$)|(^[-+]?[0]{1}(\.\d{1,2})?$)/;
        
        if (!reg.test(inputVal)) {
            alert("市场价格必须为合法数字(正数，最多两位小数)！");
            return false;
        } else {
            alert("输入合法！");
            return true;
        }
    }

    // 页面加载完成后绑定点击事件
    $(function() {
        $("#btnTest").click(function() {
            ckProPrice();
        });
    });
</script>