JS输入框正则校验

1. 开发中需要对etl组件统一进行input输入框校验，允许为空，可以不校验，默认校验长度和特殊字符，代码如下，记录以备复用。

/**
 * 数据值校验工具类
 */
var checkService = {
    // 不校验
    none: function () {
        return true;
    },

    //非空校验
    isEmpty:function (str) {
        if (str == null || str == "") return false;
    },

    // 只能输入数字[0-9]
    isDigits: function (str) {
        if (str == null || str == "") return true;
        var reg = /^\d+$/;
        return reg.test(str);
    },

    // 匹配english
    isEnglish: function (str) {
        if (str == null || str == "") return true;
        var reg = /^[A-Za-z]+$/;
        return reg.test(str);
    },

    // 匹配integer(包含正负)
    isInteger: function (str) {
        if (str == null || str == "") return true;
        var reg = /^[-\+]?\d+$/;
        return reg.test(str);
    },

    // 匹配汉字
    isChinese: function (str) {
        if (str == null || str == "") return true;
        var reg = /^[\u4e00-\u9fa5]+$/;
        return reg.test(str);
    },

    // 匹配中文(双字节字符,包括汉字和符号)
    isChineseChar: function (str) {
        if (str == null || str == "") return true;
        var reg = /^[\u0391-\uFFE5]+$/;
        return reg.test(str);
    },

    // 匹配URL
    isUrl: function (str) {
        if (str == null || str == "") return true;
        var reg = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\’:+!]*([^<>\"])*$/;
        return reg.test(str);
    },

    // 字符验证，只能包含中文、英文、数字、下划线、空格。
    stringCheck: function (str) {
        if (str == null || str == "") return true;
        var reg = /^[a-zA-Z0-9\u4e00-\u9fa5_ ]+$/;
        return reg.test(str);
    },

    //字符长度校验（最长64位）
    stringLengthCheck: function (str, length) {
        if (str == null || str == "") return true;
        length = length || 64;
        if (str.length > length) return false;
        return true;
    },
    //IP格式验证
    isIP: function (str) {
        if (str == null || str == "") return true;
        var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        return reg.test(str);
    }
};

 

2. 给需要校验的input加上[data-vaild]属性：

data-valid=“校验函数名1 校验函数名2”（多种校验，校验名以空格区分）

- html中给每个带有data-attribute属性的input元素绑定data-valild属性：

<input id="limit" type="number" data-attribute="limit" value="0"  class="width-100" data-valid="isDigits stringLengthCheck"/>

- js中给input框绑定blur函数：

/**
 * 添加校验
 * @param $div
 */
StencilsEditor.prototype.bindCheck = function ($div) {
    //添加input校验
    $div.find("input[data-attribute]").on('blur', function () {
        var $this = $(this);
        var val = $this.val();
        var valid = $this.data("valid") || "stringCheck stringLengthCheck";
        var valids = valid.split(" ")
        for (var i in valids) {
            var check = valids[i];
            if (!checkService[check](val)) {
                $this.addClass("has-error");
                $this.data("errorMsg", "errorMsg_" + check);
                break;
            }
            $this.removeClass("has-error");
        }
    });
};