Javascript前台简单验证插件

其实基于Js的验证插件机很多很多，使用起来也非常方便。为了学习Js的目的，在工作中我也自己写了个小验证插件，非常简单。

我觉得验证框架的大体流程是这样的，

（1）收集需要验证的元素(干扰式：直接写在页面表单中，无干扰式：使用Json配置需要验证的元素并在验证框架中分析Json提取需要验证的元素)

（2）选择验证方式(离开输入框即验证、表单提交验证等)

（3）使用验证方法验证(使用正则表达式实现常用的验证方法，要做到可扩展性)

（4）如若验证失败，根据失败信息显示方式，显示失败提示信息。

总的来说就是分成数据收集模块，验证模式模块，验证方法模块，错误显示模块。

下面送上我的第一个基于jquery的验证代码

//easyFormValidate1.0

//easyFormValidateWithJquery.js

//本验证方法基本能满足简单的验证需求，如不能为空，必须是日期，必须是整数，最大值，最小值等

//本验证方法验证模式就一种：手动调用该验证方法

//本验证方法失败信息显示方式也就一种：alert提示信息+页面焦点

//本验证方法是属于干扰式的验证方法，即需要在页面表单元素中增加验证属性。

//formid:传入需要验证的表单的Id或者name，在该表单的元素中需要首先定义要验证元素的验证属性，如

//<form id=testForm>元素A:<input type=text name='field1' value='I won't validate'><br>

//元素B:<input type=text name='field2' rules='fill;minlength(2);'

//msgs='元素B不能为空;元素B的最小长度不能小于2' value='I need validate'></form>

//然后在保存代码中加入if(!validateForm('testForm'))return;

function validateForm(formId){
    var retFlag=true;
    var form = $("#"+formId).size()>0?$("#"+formId):$("form[name="+formId+"]");
    function convertToObj(rules,msgs){
        var ruleArr = rules.split(";");
        var msgArr = msgs.split(";");
        var r={};
        for(var i=0;i<ruleArr.length;i++){
            r[ruleArr[i]]=msgArr[i]==null?"":msgArr[i];
        }
        return r;
    }
    $("*[rule]",form).each(function(){
        var rule = convertToObj($(this).attr("rule"),$(this).attr("message"));
        var methodName;
        var param;
        SimpleValidate.init(rule);
        for(var method in rule){
            if(method==null||method==''||SimpleValidate.rules.methods[method.toLowerCase()]==null)
                continue;
            methodName = method.match(/\w+/)[0];
            param = method.match(/\([\w,]*\)/)==null?"":method.match(/\([\w,]*\)/)[0];
            var ret =SimpleValidate.validate(this,methodName,param);
            if(ret){
                alert(ret);
                retFlag=false;
                $(this).focus();
                return false;
            }
        }
    });
    return retFlag;
};
var SimpleValidate ={
    init:function(rule){
        var methodName = "";
        for(var method in rule){
            if(method==''||this.rules.methods[method.toLowerCase()]==null||rule[method]=='')
            continue;
            methodName = method.match(/\w+/)[0];
            this.messages[methodName]=rule[method];
        }
    },
    validate:function(elmt,rule,param){
        var    result = this.rules.methods[rule.toLowerCase()].call(this,elmt,param);
        if(!result)return this.messages[rule.toLowerCase()];
    },
    messages:{
        "fill":"该输入项不能为空",
        "date":"日期格式错误，必须为形如2001-01-01格式",
        "email":"邮箱格式错误，必须为形如pdcss_gs@163.com格式",
        "integer":"必须是整数值",
        "minlength":"",
        "maxlength":"",
        "rangelength":"",
        "doctype":"不是有效的word类型"
    },
    rules:{
        methods:{
            "fill":function(elmt){
                return /\S/.test(elmt.value);
            },
            "date":function(elmt){
                return /\d{4}-\d{2}-\d{2}/.test(elmt.value);
            },
            "email":function(elmt){
                return /\w+@\w+\.\w+/.test(elmt.value);
            },
            "integer":function(elmt){
                return /^\d+$/.test(elmt.value);
            },
            "minlength":function(elmt,param){
                param = this.rules.parameters(param);
                return this.getLength(elmt.value)>=param[0];
            },
            "maxlength":function(elmt,param){
                param = this.rules.parameters(param);
                return this.getLength(elmt.value)<=param[0];
            },
            "rangelength":function(elmt,param){
                param = this.rules.parameters(param);
                return this.getLength(elmt.value)>=param[0]&&this.getLength(elmt.value)<=param[1];
            },
            "doctype":function(elmt){
                return /.+\.doc$/.test(elmt.value);
            }
        },
        parameters:    function(param){
            var re = /[\(]?(\w*)\s?[,\)]/g;
            var arr="";
            var retArray=[];
            while ((arr = re.exec(param)) != null){
                   retArray.push(arr[1]);
               }
               return retArray;
        }
    },
    getLength:function(val){
        var len = 0;
        var ch;
        if(val==null)
            return len;
        for(var i = 0; i<val.length;i++){
            ch=val.charCodeAt(i);
            if(ch>255)
                len+=2;
            else
                len++;
        }
        return len;
    }
};