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

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

所属分类 WEB

相关标签 JQuery校验绑定

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

其他

以上是公共校验方法的大体框架。

在实际应用中应当多处增加非空判断,以保证方法的正常运行。

可以不断拓展更多便捷的校验规则。

如常用的E-Mail、身份证号、生日等等,使校验工厂获得更丰富的校验能力。

特别针对调用实例书写格式异常的情况,因此建议对外提供一个标准API调用指南。

申明调用的语法与格式,并提供各类参数的作用和变量的入值规范等。

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

通过Vuex实现全局状态管理

Vuex 是一个专为 Vue 应用程序开发的状态管理模式,通过集中式存储应用所有组件的状态,依照规则确保状态可以进行标准方式变化,比较适合应用在公共基础数据存放,如:用户信息

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核