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

 

posted @ 2018-09-20 11:08  Evaxtt  阅读(...)  评论(... 编辑 收藏