百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

编程技巧:Jquery实时验证,小数位补0,指定长度的「正小数」

csdh11 2025-02-03 12:08 14 浏览

只能输入【正小数】的输入框获取到焦点时,移除千位分隔符,

在输入数据时,实时校验输入内容是否正确,

失去焦点后,添加千位分隔符格式化数字。同时小数位未满时末尾补0

HTML代码

JS调用方法

    $(document.body).find("input[type=text]").each(function() {
        // 验证输入内容
        callCustomiseInputCheck(this);
    });

验证小数位补0,【正小数】类型方法

function callCustomiseInputCheck(inputObject) {
    jQuery.each(inputObject.classList, function(itemIndex, classItem) {
        //例: 整数部桁数:2、小数部桁数:3
        if (/^force\-decimalToFixed\-\d{1,}\-\d{1,}$/.test(classItem)) {
            // 方法【runInputFilter】,参照文章【Jquery实时验证,只能输入指定长度的数字】
            runInputFilter(inputObject, ',', function(value) {
                if (/^\d*\.?\d*$/.test(value)) {//数字的场合
                    var jsInteger = value.split('.')[0];//整数部
                    var jsScale = value.split('.')[1];//小数部
                    //整数部分越界的场合
                    if (jsInteger && parseInt(jsInteger) > 0
                        && jsInteger.length > parseInt(classItem.split('-')[2])) {
                        return false;
                    }
                    //小数部分越界的场合
                    if (jsScale && parseInt(jsScale) > 0
                        && jsScale.length > parseInt(classItem.split('-')[3])) {
                        return false;
                    }
                    return true;
                } else {
                    //不是数字的场合
                    return false;
                }
            });
            //格式化
            postLostFocus(inputObject, function(inputObject) {
                if (inputObject.value == "") {
                    return false;
                }
                if (!inputObject.value.contains('.')) {
                    inputObject.value = inputObject.value + '.';
                }
                var regExp = RegExp(/^(\-?)(0{1,})?(\d*\.?\d*)$/);
                var outPutArray = inputObject.value.match(regExp);
                inputObject.value = outPutArray[1] + outPutArray[3];//去掉左侧重复的0(例:「0012?12」、「0012.23?12.23」)

                var classItemLength = classItem.split('-').length
                if (classItemLength == 4) {//指定小数位数的场合
                    var jsScale = parseInt(classItem.split('-')[3]);//小数部
                    inputObject.value = inputObject.value.split('.')[0] + '.' + inputObject.value.split('.')[1]).padEnd(jsScale, '0')//小数末尾补0
                }
                inputObject.value = CommonUtilJs.addComma(inputObject.value)
            });
            //终止循环
            return false;
        }
    });
}

共通处理方法

/**
 * 绑定失去焦点时的处理
 * @param textbox HTML输入框
 * @param lostFocusFunction 失去焦点时的处理
 * 例:postLostFocus(ocument.getElementById("XXX"),functionXXXXX);
 */
function postLostFocus(textbox, lostFocusFunction) {
    ["focusout"].forEach(function(event) {
        var eventCommonPostLostFocus = function(event) {
            lostFocusFunction(this);
        }
      // 参照文章【前端Jquery调用on或bind方法,避免重复绑定】
        addEventExtras(textbox, event, eventCommonPostLostFocus);
    });
}

function CommonUtilJs() { }
//数值格式化
CommonUtilJs.addComma = function(value) {
    var patern = /^([\+\-]?\d+)(\d{3})([\,\d+]*)(\.\d+)?$/;
    var rep = "";
    var val = "";
    if (value != undefined && value != null) {
        val = String(value);
        while (rep != val) {
            rep = val;
            val = rep.replace(patern, "$1,$2$3$4");
        }
    }
    return val;
};

相关推荐

探索Java项目中日志系统最佳实践:从入门到精通

探索Java项目中日志系统最佳实践:从入门到精通在现代软件开发中,日志系统如同一位默默无闻却至关重要的管家,它记录了程序运行中的各种事件,为我们排查问题、监控性能和优化系统提供了宝贵的依据。在Java...

用了这么多年的java日志框架,你真的弄懂了吗?

在项目开发过程中,有一个必不可少的环节就是记录日志,相信只要是个程序员都用过,可是咱们自问下,用了这么多年的日志框架,你确定自己真弄懂了日志框架的来龙去脉嘛?下面笔者就详细聊聊java中常用日志框架的...

物理老师教你学Java语言(中篇)(物理专业学编程)

第四章物质的基本结构——类与对象...

一文搞定!Spring Boot3 定时任务操作全攻略

各位互联网大厂的后端开发小伙伴们,在使用SpringBoot3开发项目时,你是否遇到过定时任务实现的难题呢?比如任务调度时间不准确,代码报错却找不到方向,是不是特别头疼?如今,随着互联网业务规模...

你还不懂java的日志系统吗 ?(java的日志类)

一、背景在java的开发中,使用最多也绕不过去的一个话题就是日志,在程序中除了业务代码外,使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”,没错在日常的开发、调试过程中打印日志是常干...

谈谈枚举的新用法--java(java枚举的作用与好处)

问题的由来前段时间改游戏buff功能,干了一件愚蠢的事情,那就是把枚举和运算集合在一起,然后运行一段时间后buff就出现各种问题,我当时懵逼了!事情是这样的,做过游戏的都知道,buff,需要分类型,且...

你还不懂java的日志系统吗(javaw 日志)

一、背景在java的开发中,使用最多也绕不过去的一个话题就是日志,在程序中除了业务代码外,使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”,没错在日常的开发、调试过程中打印日志是常干...

Java 8之后的那些新特性(三):Java System Logger

去年12月份log4j日志框架的一个漏洞,给Java整个行业造成了非常大的影响。这个事情也顺带把log4j这个日志框架推到了争议的最前线。在Java领域,log4j可能相对比较流行。而在log4j之外...

Java开发中的日志管理:让程序“开口说话”

Java开发中的日志管理:让程序“开口说话”日志是程序员的朋友,也是程序的“嘴巴”。它能让程序在运行过程中“开口说话”,告诉我们它的状态、行为以及遇到的问题。在Java开发中,良好的日志管理不仅能帮助...

吊打面试官(十二)--Java语言中ArrayList类一文全掌握

导读...

OS X 效率启动器 Alfred 详解与使用技巧

问:为什么要在Mac上使用效率启动器类应用?答:在非特殊专业用户的环境下,(每天)用户一般可以在系统中进行上百次操作,可以是点击,也可以是拖拽,但这些只是过程,而我们的真正目的是想获得结果,也就是...

Java中 高级的异常处理(java中异常处理的两种方式)

介绍异常处理是软件开发的一个关键方面,尤其是在Java中,这种语言以其稳健性和平台独立性而闻名。正确的异常处理不仅可以防止应用程序崩溃,还有助于调试并向用户提供有意义的反馈。...

【性能调优】全方位教你定位慢SQL,方法介绍下!

1.使用数据库自带工具...

全面了解mysql锁机制(InnoDB)与问题排查

MySQL/InnoDB的加锁,一直是一个常见的话题。例如,数据库如果有高并发请求,如何保证数据完整性?产生死锁问题如何排查并解决?下面是不同锁等级的区别表级锁:开销小,加锁快;不会出现死锁;锁定粒度...

看懂这篇文章,你就懂了数据库死锁产生的场景和解决方法

一、什么是死锁加锁(Locking)是数据库在并发访问时保证数据一致性和完整性的主要机制。任何事务都需要获得相应对象上的锁才能访问数据,读取数据的事务通常只需要获得读锁(共享锁),修改数据的事务需要获...