编程技巧:Jquery实时验证，指定长度的数字

为了适当提高验证效率，在输入数字的项目里，增加实时验证功能，

用户只能输入指定长度的数字。以外的场合禁止输入。

HTML做成方法

<input type="text" class="force-number-10" .../>

JS调用方法

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

验证数字类型方法

/**
 * 通过正则表达时验证数字类型数据
 * @param inputObject HTML输入控件
 */
function callCustomiseInputCheck(inputObject) {
    jQuery.each(inputObject.classList, function(itemIndex, classItem) {
        if (/^force\-number\-\d{1,}$/.test(classItem)) {
            //例：<input type="text" class="force-number-10" .../>
            runInputFilter(inputObject, null, function(value) {
                var strRegExp = '^\\d{0,' + classItem.split('-')[2] + '}#39;;
                var regExp = RegExp(strRegExp);
                return regExp.test(value);
            });
        }
    });
}

共通处理方法

//汉字输入法是否打开
var compositionShowFlag = false;
/**
 * 通过Jquery绑定实时处理事件
 * @param textbox HTML输入控件
 * @param valueSeparator 格式化分隔符(数字类型：「,」；日期类型：「/」等等)
 * @param inputFilter フィルタファンクション
 * 例：runInputFilter(ocument.getElementById("XXX"),false,function(){return true;});
 */
function runInputFilter(textbox, valueSeparator, inputFilter) {

  // 针对输入中文的特别处理
    var eventArray = [];
    eventArray.push("compositionstart");
    eventArray.push("compositionend");
    eventArray.forEach(function(event) {
        var checkComposition = function(event) {
            if (event.type == 'compositionstart') {
                compositionShowFlag = true;
            }
            if (event.type == 'compositionend') {
                compositionShowFlag = false;
            }
        };
        // Jquery绑定事件
      // 参照上一篇文章【前端Jquery调用on或bind方法，避免重复绑定】
        addEventExtras(textbox, event, checkComposition);
    });
  //各个实时事件的绑定处理
    var eventArray = [];
    eventArray.push("compositionend");
    eventArray.push("keydown");
    eventArray.push("change");
    eventArray.push("keyup");
    eventArray.push("focus");
    eventArray.push("mousedown");
    eventArray.push("mouseup");
    eventArray.push("contextmenu");
    eventArray.push("drop");
    eventArray.push("paste");
    eventArray.push("focusout");
    eventArray.forEach(function(event) {
        var eventCommonFilter = function(event) {
            if (compositionShowFlag == true) {
                return;
            }
            if (valueSeparator != null) {
                $(this).val(this.value.replaceAll(valueSeparator, ''));
            }

            // 绑定事件的具体验证逻辑
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (this.hasOwnProperty("oldValue")) {
                $(this).val(this.oldValue);
                this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
            } else {
                $(this).val("");
            }
        };
        // Jquery绑定事件
      // 参照上一篇文章【前端Jquery调用on或bind方法，避免重复绑定】
        addEventExtras(textbox, event, eventCommonFilter);
    });
}