一个简易的表单校验插件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方法添加检验规则