一个简易的表单校验插件wv.js

很多网站都有登陆和注册功能，只要涉及到登陆和注册的几乎全部都要用到表单，而表单在提交前，需要对输入进行校验，验证输入长度，类型等等是否合法，目前常用的就是jQuery-validate.js这个插件。其实这些插件的实现眼里都是比较简单的，主要用到input标签的focus和blur事件，然后在这个事件触发的时候通过正则表达式对输入的值进行检验，然后返回校验结果。
现在我们就来实现一个简单的表单校验器

/** * author:yangyangwang * desc：表单验证插件 */(function(window,$){    var wv = function(){    }    wv.prototype={        valid:true,        version:"1.0.0",        name:"wv",        desc:"表单验证插件",        rules:{            "noEmpty":{                rules:function(value,title){                    if(!value){                        return title+"不能为空"                    }                }            },            "Number":{                rules:function(value,title){                    if(!value){                        return title+"不能为空"                    }else{                        if(!/^[0-9]*$/.test(value)){                            return title+"只能是数字"                        }                    }                }            }        },        addRules:function(option){            //检验option是否合法            if($.type(option)){            }else{                throw new Error("规则不合法!")                return;            }            this.rules=$.extend(this.rules, option);        },        init:function(option){            var defaultOption = {                color:"red",//提示字体颜色                border:"0px solid red",                left:"40%",                top:"2px"            };            var option = $.extend(defaultOption,option);            var self = this;            $("input[validate]").on("focus",function(e){                var ev = e||event;                var target = ev.target;                $(target).siblings(".tip").remove();//当输入框激活时移除提示文字                $(target).css({//当输入框激活时如果之前处于错误提示样式则恢复到激活样式                    border:'1px solid cornflowerblue',                    boxShadow:'0px 0px 5px cornflowerblue'                })            });            $("input[validate]").on("blur",function(e){//输入框失去焦点的时候进行输入验证                var ev = e||event;                var target = ev.target;                var ruleStr = $(target).attr("validate");                var rulesArr = ruleStr.split(" ");                for(var i = 0;i<rulesArr.length;i++){                    var msg = self.validMethod(rulesArr[i],target);                    if(msg){                        var tip = document.createElement("span");                             tip.className = "tip";                             tip.innerText = msg;                             $(target).after($(tip));                             $(tip).css({                                position:"relative",                                dispaly:"inline-block",                                minWidth:"80px",                                padding:"3px",                                height:"25px",                                lineHeight:'center',                                background:'rgba(0,0,0,0)',                                color:option.color,                                border:option.border,                                borderRadius:"3px",                                fontWeight:"600",                                fonSize:"13px",                                left:option.left,                                top:option.top                             });                        target.style.border="1px solid #ed8464";                        target.style.boxShadow="0px 0px 5px #dc3b33";                        this.valid = false;                        break;                    }                    else{                        target.style.border="1px solid #558630";                        target.style.boxShadow="0px 0px 0px";                    }                   }            })        },        validMethod:function(rule,obj){            var msg = "";            var title = $(obj).attr("title")||"该输入项";            var value = $(obj).val();            if(this.rules[rule]){                try{                    msg = this.rules[rule].rules(value,title);                }catch(e){                    throw new Error("校验规则不合法")                }            }            return msg;        }       }    wv.prototype.init.prototype = wv.prototype;//这句的目的是为了让init中的this和mv.prototype中的this是同一个对象。参考jquery中的实现；    window.wv = wv;})(window,$)

插件是基于jquery的，所有在用这个插件前要保证jquery已经加载
下面是效果图
noEmpty:

Number:

Success:

这里只内置了noEmpty和Number两种校验，如果需要其他校验可以通过addRules方法添加检验规则