📖Jquery.bind()实现前端字段公共校验器

发布： 2022-07-15

热度： 34

趋势： 34

权重： 0

分类： 前端开发

标签： JS  Jquery  校验

🎯

严谨的页面开发需要着重关注前台校验相关的内容，确保请求参数的合法以保证服务器安全，界面参数众多需要建立一个公共方法，公共校验器的核心方法是Jquery.bind()

bind()

bind() 最简单的用法是绑定一个函数，使这个函数不论怎么调用都有同样的 this 值。

在 JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法

这三个方法的主要作用是改变函数中的 this 指向

bind()是返回对应函数，便于稍后调用
apply 、call 则是立即调用

公共校验工厂

调用示例

//公共校验器创建实例
CheckFactory.addCheck([{
    id: "输入框ID",
    required: true,
    //快捷规则：必填
    integer: true,
    //快捷规则：数字
    regexCheck: '^((\+86)|0)?(\d+)$',
    //正则规则	
    //用来展示标红、错误提示tips等
    perID: "输入框外包裹元素ID" 
},
// 示例
{
    id: "userName",
    required: true,
    //快捷规则：必填
    perID: "userNameDiv"
}]);

样例

校验工厂文件需要独立建立一个 JS 文件。

一般在最顶层进行引用，以保证所有的页面都能够正常调用。

//校验工厂类，单独建立一个JS文件
CheckFactory = function() {
    //逐一创建校验器
    function addCheckListEvent(objList) {
        //循环创建实例中的集合
        for (var arg in objList) {
            //(funtion(){})();匿名函数，立即执行函数；相当于先申明一个函数，声明完后直接调用；	
            (function(i) {
                //接受调用规则集、
                //校验元素ID
                var checkId = objList[i].id;
                //外围元素
                var divId = objList[i].perID;
                //必填
                var requiredPram = objList[i].required;
                //数字
                var integerPram = objList[i].integer;
                //正则
                var regexPram = objList[i].regexCheck;
                //......可以拓展更多规则，如E-mail、Limit等		
                //bind绑定生成对应的校验规则，选中和输入时均会激活校验器
                $(document.getElementById(checkId)).bind("keyup blur",
                function() {
                    var perOuterDiv = $(document.getElementById(divId));
                    var isRequired = true;
                    var isInteger = true;
                    var isRegexCheck = true
                    //......可以拓展更多规则				
                    //必填项，接受入参true或false
                    if (requiredPram) {
                        isRequired = requiredCheck(checkId);
                    }
                    //纯数字校验
                    if (integerPram) {
                        isNumber = integerCheck(checkId);
                    }

                    //正则
                    if (regexPram !== null || regexPram !== undefined || regexPram !== '') {
                        isRegexCheck = regexCheck(checkId, regexPram);
                    }
                    //检查校验结果
                    //以必填为例...该内容定义进行自定义
                    if (isRequired) {
                        //清除异常样式，红框
                        perOuterDiv.removeClass("invalid");
                        perOuterDiv.attr("checkResult", 0);
                    } else {
                        perOuterDiv.addClass("invalid");
                        perOuterDiv.attr("checkResult", 1);
                        return;
                    }
                    //其他检查同理...略
                });
            })(arg);
        }
    }
    //必填检查
    function requiredCheck(checkId) {
        var value = document.getElementById(checkId).val().trim();
        //输入内容长度需要根据语言进行判断
        if (getLengthForStr(value) < 1) {
            return false;
        }
        return true;
    }

    //数字校验
    function integerCheck(checkId) {
        var rule = /^[0-9]+$/gi;
        var intergerVal = document.getElementById(checkId).val();
        if (intergerVal != "" && !rule.test(intergerVal)) {
            return false;
        }
        return true;
    }
    //正则校验
    function regexCheck(checkId, regexPram) {
        var inputValue = document.getElementById(checkId).val();
        var rule = regexPram;
        var re = new RegExp(rule);
        if (inputValue != "" && !re.test(inputValue)) {
            return false;
        }
        return true;
    }
    //检查长度 长度转换
    function getLengthForStr(value) {
        //长度为1的字符串
        var oneChar = /[x00-xff]/gi;
        //长度为2的字符串
        var twoChar = /[u0080-u07FF]/gi;
        //长度为3的字符串
        var triChar = /[u0800-uFFFF]/gi;
        var regRN = /x0a/g;
        var textLength = 0;
        if (oneChar.test(value)) {
            textLength += value.match(oneChar).length;
            if (regRN.test(value)) {
                textLength += value.match(regRN).length;
            }
        }
        if (twoChar.test(value) && !/i/gi.test(value)) {
            textLength += value.match(twoChar).length * 2;
        }
        if (triChar.test(value)) {
            textLength += value.match(triChar).length * 3;
        }
        return textLength;
    }
    return {
        addCheck: function(jsonArray) {
            var jsonStr = JSON.stringify(jsonArray);
            var objList = jsonArray;
            //逐一创建校验器
            addCheckListEvent(objList);
        }
    };
} ();