JavaScript实现整数位数与小数位数的动态验证

作者:纸飞机

时间:2026-10-27

浏览:499

本文介绍了一种基于JavaScript和jQuery的简单数字验证方法。通过动态构建正则表达式,实现对输入整数位数和小数位数的灵活控制。示例展示了如何缓存验证配置并调用验证函数,适用于需要严格限制数值格式的前端场景。

文章目录

JavaScript实现整数位数与小数位数的动态验证

具体实现代码如下:

function validateNum(obj) {
// 正整数位数限制(此处使用了缓存数据)
var number = obj.data(validate).number;
// 小数位数限制(此处使用了缓存数据)
var decimal = obj.data(validate).decimal;
// 动态生成基础验证正则表达式
eval("var reg = /^[0-9]{0," + number + "}([.]?[0-9]{0," + decimal + "})$" + "/g;");
var value = obj.val();
var maxnumlen = number + decimal + 1; // 最大允许长度(包含小数点)
if (!reg.test(obj.val())) return false;
// 当最大长度等于当前值长度且值中不包含小数点时
if (maxnumlen == value.length && value.indexOf('.') <= 0) {
return false;
    }
// 尝试获取小数点的位置索引
var valueindexof = value.indexOf('.');
if (valueindexof > 0) {
// 如果小数点后没有字符,则验证失败
if (value.charAt(valueindexof + 1) == "") {
return false;
        }
    }
// 分割字符串以便判断小数点前后的内容
var valuesplit = value.split('.');
// 如果值的总长度超过了定义的正整数长度限制
if (value.length > number) {
if (valuesplit.length == 1) {
return false;
        }
// 如果最大长度减去定义的整数长度大于等于最大长度,即表示超长,返回false
if (maxnumlen - number >= maxnumlen) {
return false;
        }
    }
return true;
}

在使用前,需给元素缓存一个validate对象,之后即可直接调用该函数。


配置定义示例:


$("#example").data("validate", { number: 2, decimal: 2 });


函数调用示例:


validateNum($("#example));

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章