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");
        }
    });
};