博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端校验插件
阅读量:5113 次
发布时间:2019-06-13

本文共 10450 字,大约阅读时间需要 34 分钟。

自己开发并一直在改进的一套前端校验插件,非常好用。

各种特性不一一细说,上代码。

$.extend($.fn,        {            formVerify:function(opts){                var self = this,                    formVerify = $.formVerify,                    defaults = formVerify.defaults,                    utility = formVerify.utility,                    config = $.extend({},defaults,opts),                    rules = config.rules,                    errorHandler = config.errorHandler,                    submitHandler = config.submitHandler,                    checkAll = config.checkAll,                    list = {};                if(!rules){                    throw("no rules");                    return;                }                for(var x in rules){                    // 需要验证的元素                    var formEle = self.find("[rel="+ x +"]");                    // 如果没有这个元素 跳过 方便组合表单                    if(!formEle.get(0)) continue;                    list[x] = formEle.setDefault().setCheck(rules[x],errorHandler);                }                // 将验证元素集合给到自身                self["formList"] = list;                // 将验证元素集合给到$.formVerify.formlist                $.formVerify.formlist[self.attr("rel")] = list;                // 表单提交处理                self.on("submit",function(e){                    utility.stopHandler(e).stopDef();                    self.checkFlag = true;                     $.formVerify.isTrigger = true;                    for(var x in list) {                        // checkType 为setDefault 方法中给与的验证事件type 属性                        if(!list[x].trigger(list[x].checkType).checkFlag){                            self.checkFlag = false;                            if(!checkAll) break;                        }                    }                     $.formVerify.isTrigger = false;                    submitHandler.call(self);                });                return self;            },            setDefault:function(){                var self = this,                    nodeName = self.get(0).tagName.toLocaleLowerCase(),                    type = self.attr("type");                switch(nodeName){                    case "input":                    self.checkFlag = type === "checkbox" ? self.prop("checked") : false;                    break;                    case "select":                    self.checkFlag = self.val() !== "";                    break;                    default:                    self.checkFlag = false;                    break;                }                return self;            },            setCheck:function(rules,commonerrorHandler){                var self = this,                    nodeName = self.get(0).tagName.toLocaleLowerCase(),                    // 自己的验证处理                    errorHandler = rules.errorHandler;                    // 跟传入的通用错误处理 若有自己的 则保留自己的 若无 使用通用处理                    if(typeof(errorHandler) !== "function")  errorHandler = commonerrorHandler;                    // 将最终决定的错误处理 给自己                    self.errorHandler = errorHandler;                    var                    // 验证流程方法                    selfCheckfn = function(){                        for(var x in rules){                            // 如果有自己的验证处理 则跳过                            if(x === "errorHandler") continue;                            // 获取值并去除空格                            var val = $.formVerify.utility.trim(self.val()),                            // 使用验证函数进行验证 并得到返回值                                flag = $.formVerify.utility.rules[x].call(self,rules[x][0],val);                            // 如果是breaktag 直接跳出循环                            if(flag == "breakTag") break;                            //如果出错 则执行出错处理                            if((typeof(flag)=="boolean" && !flag) || (typeof(flag)=="number" && flag<0)) return self.setState(flag,rules[x][1],errorHandler);                        }                        self.setState(flag,"",errorHandler);                    },                    // 针对不同元素获取绑定事件type                    getType = function(){                        // 自定义校验事件type 暂时记在元素本身                        var selfType = this.attr("check-type");                        if(!!selfType){                            this.checkType = selfType;                            return this;                        }                        // 根据元素属性决定校验事件type                        var checkType,                            type = this.attr("type") || this[0].nodeName.toLowerCase();                        switch(true){                            case type === "checkbox":                            checkType = "click";                            break;                            case type.indexOf("select")>-1:                            checkType = "change";                            break;                            default:                            checkType = "blur";                            break;                        }                        this.checkType = checkType;                        return this;                    }                // 绑定事件                self.on(getType.call(self).checkType,function(){                    selfCheckfn.call(self);                });                return self;             },            setState:function(flag,text){                var self = this,                    ff = typeof(flag)=="number" ? flag>=0 : flag;                  self.checkFlag = ff;                // 执行自己的错误处理                self.errorHandler.call(self,flag,text);                return self;            }        }    );    $.formVerify = {        // 表单集合        formlist:{        },        // 默认配置表        defaults:{            // 提交时是否全部验证            checkAll : true,            // 默认校验处理函数            errorHandler:function(flag,text){                // for wap b2s reg                var tip = this.closest("dl").next(".error-tips");                flag ? tip.html("").hide() : tip.html(text).fadeIn();            },            // 默认提交函数            submitHandler:function(){                if(this.checkFlag) this[0].submit();            },            // 默认ajax处理            ajaxHandler:{                success:function(r){                    var status=r.status;                    if(status==1) return 0;                    return status;                },                error:function(){                    return -1;                }            }        },        // 功能集合        utility:{            // 更改ajax全局处理            updateAjaxHandler:function(o){                $.extend($.formVerify.defaults.ajaxHandler,o);            },            // 去除空格            trim:function(g){                return g.replace(/(^\s*)|(\s*$)/g,"");            },            // 阻止默认/冒泡            stopHandler:function(e){                var e = e || event;                return {                    // 阻止默认事件                    stopDef:function(){                        if(e.preventDefault) e.preventDefault();                            else e.returnValue=!1;                    },                    // 阻止冒泡                    stopBub:function(){                        if(e.stopPropagation) e.stopPropagation()                            else e.cancelBubble=!0;                    }                }            },            // 各类处理逻辑            rules:{                // 为空                required:function(rule,value){                    if(!rule && value=="") return "breakTag";                    if(this.attr("type") === "checkbox") return this.checkFlag = this.prop("checked");                    if(value == "") return false;                    return true;                },                // 长度                length:function(rule,value){                    if(!rule instanceof Array) return;                    var L=value.replace(/[^\x00-\xf]/g,"xx").length;                    if(L
rule[1]) return false; return true; }, // 正则 reg:function(rule,value){ var reg=new RegExp(rule,"gi"); if(!reg.test(value)) return false; return true; }, // 对比 equalto:function(rule,value){ var targetVal = $.formVerify.utility.trim($(rule).val()); return value == targetVal; }, // 及时校验 remote:function(rule,value){ var set = rule, url = set.url, key = set.key, type = set.type||"get", async = set.async==!0, timeout = ((set.timeout>0)&&set.timeout)||3000, ajaxHandler = $.formVerify.defaults.ajaxHandler, success = (set.success||ajaxHandler.success)||new Function, error = (set.error||ajaxHandler.error)||new Function, returnFlag = null; sendData = {}; sendData[key] = value; // 额外数据 var addData = {}; if(typeof(set.addData) === "function"){ var _data = set.addData(); (typeof(_data) === "object") && (addData = _data); } $.ajax({ url:url, type:type, data:$.extend({},sendData,addData), dataType:"json", async:async, cache:false, success:function(){ returnFlag=success.apply(null,arguments) }, error:function(){ returnFlag=error.apply(null,arguments); }, timeout:timeout }); return returnFlag; } }, // 公用正则 regs:{ // 手机号 phone:"(^1[0-9]{10}$)", // 手机验证码 verifycode:"(^[0-9]{6}$)", // 密码 password:"(^.{6,20}$)", // 中文名 cnname:"(^[\\u4e00-\\u9fa5]{2,10}$)", // 英文名 enname:"(^[a-zA-Z]{2,10}$)", // 学生账号 stu:"(^[a-zA-Z_0-9]{1,}$)" } } }

 

转载于:https://www.cnblogs.com/anson0415/p/5295436.html

你可能感兴趣的文章
面向对象的小demo
查看>>
微服务之初了解(一)
查看>>
GDOI DAY1游记
查看>>
收集WebDriver的执行命令和参数信息
查看>>
数据结构与算法(三)-线性表之静态链表
查看>>
mac下的mysql报错:ERROR 1045(28000)和ERROR 2002 (HY000)的解决办法
查看>>
MyBaits动态sql语句
查看>>
HDU4405(期望DP)
查看>>
拉格朗日乘子法 那些年学过的高数
查看>>
vs code 的便捷使用
查看>>
Spring MVC @ResponseBody返回中文字符串乱码问题
查看>>
用户空间与内核空间,进程上下文与中断上下文[总结]
查看>>
JS 中的跨域请求
查看>>
JAVA开发环境搭建
查看>>
mysql基础语句
查看>>
Oracle中的rownum不能使用大于>的问题
查看>>
cassandra vs mongo (1)存储引擎
查看>>
Visual Studio基于CMake配置opencv1.0.0、opencv2.2
查看>>
遍历Map对象
查看>>
MySQL索引背后的数据结构及算法原理
查看>>