jQuery-input输入验证

前言：

原先直接引用inputmask.js来做输入验证，但后来发现它和 onkeyup 事件有相同的 bug，在中文输入法状态下，输入汉字之后直接回车，会直接输入字母。于是就需要寻找替代品，一开始找到了 oninput 事件，但使用了一会儿发现也存在 bug，当先输入一些字符时再切换中文输入法输入，之前输入的字符会消失相应的字符数量。最后只能自己写共通方法来进行验证。

共通方法:

/**
 * 输入验证共通
 * @param selector 选择器
 * @param reg 正则表达式
 * @param endFunc 输入结束后的验证方法
 * @param endParam endFunc方法的参数
 * @param onblurStr 离开input框操作的方法名（字符串）
 */
function inputValidation(selector, reg, endFunc, endParam, onblurStr) {
    var isInputZh = false;
    var search = document.querySelectorAll(selector);
    $.each(search, function (i, item) {
        item.addEventListener('compositionstart', function (e) {
            isInputZh = true;
        }, false);
        item.addEventListener('compositionend', function (e) {
            isInputZh = false;
            validate(item, reg);
            if (endFunc !== undefined) {
                endFunc(item, endParam);
            }
        }, false);
        item.addEventListener('input', function (e) {
            if (isInputZh) return;
            validate(item, reg);
            if (endFunc !== undefined) {
                endFunc(item, endParam);
            }
        }, false);

        if (onblurStr !== undefined) {
            $(item).attr("onblur", onblurStr + "(this)");
        }
    });

    function validate(valDom, reg) {
        var domVal = $(valDom).val();
        $(valDom).val(domVal.match(reg));
    }
}

一些验证的辅助方法：

/**
 * 数字设置最大值，并去除开头0
 * @param item dom对象
 * @param max 最大值（可为空）
 */
function validateNumMax(item, max) {
    var _this = $(item);
    if (_this.val().match(/^0\d+/)) {
        _this.val(_this.val().substr(1));
    }
    if (max !== undefined && (Number(_this.val()) > max)) {
        _this.val(max);
    }
}

/**
 * 去除数字末尾的小数点
 * @param item dom对象
 */
function validateRemovePoint(item) {
    var _this = $(item);
    var _thisVal = _this.val();
    if (_thisVal.match(/\d*\.$/)) {
        _this.val(_thisVal.substr(0, _thisVal.length - 1));
    }
}

/**
 * 验证邮箱格式
 * @param item dom对象
 */
function isEmail(item) {
    var strEmail = $(item).val();
    strEmail = strEmail.trim();
    $(item).val(strEmail);
    if (strEmail != '') {
        if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
            return true;
        } else {
            $(item).focus();
            $(item).val('');
            alert("邮箱格式不对");
        }
    }
}

调用共通方法（Class名沿用之前inputmask）：

//只能英文或数字(3位)
inputValidation(".letterNum-inputmask", /[a-zA-Z0-9]{1,3}/);

//只能英文或数字(2位)
inputValidation(".letterNum-inputmask2", /[a-zA-Z0-9]{1,2}/);

//只能英文或数字
inputValidation(".letterNumOnly-inputmask", /[a-zA-Z0-9]+/);

//只能输入整数
inputValidation(".level-inputmask", /^\d+/);

//只能输入0-100的整数
inputValidation(".hundred-inputmask", /^\d+/, validateNumMax, 100);

//只能输入0~1的数，两位小数
inputValidation(".scoreDecimal-inputmask", /[0-9]+\.?[0-9]{0,2}/, validateNumMax, 1, "validateRemovePoint");

//只能输入两位小数的数字
inputValidation(".decimalTwo-inputmask", /[0-9]+\.?[0-9]{0,2}/, validateNumMax, undefined, "validateRemovePoint");

//只能输入一位小数的数字
inputValidation(".decimalOne-inputmask", /[0-9]+\.?[0-9]?/, validateNumMax, undefined, "validateRemovePoint");

//可小数的数字
inputValidation(".decimal-inputmask", /[0-9]+\.?[0-9]*/, validateNumMax, undefined, "validateRemovePoint");

//email
inputValidation(".email-inputmask", /^[.a-zA-Z0-9_-]+@?[.a-zA-Z0-9_-]*/,undefined,undefined,"isEmail");

参考资料：

• 如何在HTML中限制input 输入框只能输入纯数字
• input 事件兼容处理以及中文输入法优化