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

boyanx8个月前技术教程28

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

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

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

HTML代码

<input type="text" class="force-decimalToFixed-2-3" .../>

JS调用方法

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

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

function callCustomiseInputCheck(inputObject) {
    jQuery.each(inputObject.classList, function(itemIndex, classItem) {
        //例:<input type="text" class="force-decimalToFixed-2-3" .../> 整数部桁数: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;
};

相关文章

介jquery.validate.js简单实用的表单验证框架

最近在做用户登录、注册、以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了,根据自己需求进行了细节修改,重要是样式方面吧。第一次发表这些,说得不好不要介意,开始吧。首先:...

百度竞价网呼代码:怎么在一个页面里面多处输入回拨功能

最近的百度对于恶意代码查的也严格,行业人都懂得,但是用百度自己的产品都没有关系,早在一年前百度竞价的网呼代码应用的很多地方。今天来说说怎么灵活试用百度的网呼代码,而不是单单后台设置下那种简单的页面,没...

jQuery 获取和设置HTML元素

jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容(例如HTML标签)、属性值等。text()方法text() 方法可以用...

laravel + workerman 聊天室示例代码

这是一个简单的 Laravel + Workerman 聊天室示例代码:1、安装 Workerman 和 Workerman-for-Websocket在Laravel项目根目录下使用Composer...

前端三剑客:HTML、CSS 和 JavaScript

#头条创作挑战赛#一个基本的网站包含很多个网页,每个网页主要是由三部分组成,即结构(HTML)、表 从入门到精通 Python网络爬虫框架Scrapy 12 现(CSS)和行为(JavaScript)...

前端框架 Vue 不要一开始就用脚手架~Axios 中的GET、POST请求

作为后端攻城狮,写前端代码是一种什么体验?相信不少人和 @Python大星 一样,有写过前端代码的经历。记录一下,Vue 框架开发中“啼笑皆非”的故事,非专业前端人员,该案例无 css 美化,引起不适...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。