JQuery简便实现页面元素数据验证功能

实现要点

       利用JQuery提供的素元查找功能，方便查找出需要验证的元素对象;通过$(document).ready事件进很验证代码的初始化和执行的切入工作。

       定义验证规则描述属性,在初始化时对相关验证描述进行分解和集成处理。

       拦载Form提交过程进行验证处理，根据情况确定是否提交数据。

       元素对象在发生onchange事件时自动执行验证处理功能。

       通过alert和自定义区域显示错误信息。

具体JavaScript代码

       实现代码并不复杂只有几百行，由于相关代码比较简单所以没有编写注解.

具体代码：

// JScript 文件

//<validator>

//type:int|number|date|string

//nonnull:true|false

//regex:^[-/+]?/d+$

//min:0

//max:999999999

//campare:id

//comparetype:eq,neq,leq,req,le,ri

//tipcontrol:

//tip:

//</validator>

var ErrorMessage;

function FormValidate(form)

{

    ErrorMessage='';

    var legality,items;

    legality = true;

    items = $(form).find("input[@validator]");

    for(var i =0;i< items.length;i++)

    {

       if(legality)

       {

            legality = OnItemValidator($(items[i]));

       }

       else

       {

            OnItemValidator($(items[i]));  

       }

      

    }

    items = $(form).find("textarea[@validator]");

    for(var i =0;i< items.length;i++)

    {

       if(legality)

       {

            legality = OnItemValidator($(items[i]));

       }

       else

       {

            OnItemValidator($(items[i]));  

       }

      

      

    }

    items = $(form).find("select[@validator]");

    for(var i =0;i< items.length;i++)

    {

       if(legality)

       {

            legality = OnItemValidator($(items[i]));

       }

       else

       {

            OnItemValidator($(items[i]));  

       }

      

      

    }

    if(!legality)

    {

        if(ErrorMessage !='')

            alert(ErrorMessage);

    }

    return legality;

}



function CreateValObject(validator)

{

    var valobj = {  type:'string',

                    nonnull:false,

                    regex:null,

                    min:null,

                    max:null,

                    campare:null,

                    comparetype:null,

                    tipcontrol:null,

                    tip:null};

    var properties;

    var execute;

    var namevalue;

    properties = validator.split(';');

    for(i=0;i<properties.length;i++)

    {

        namevalue = properties[i].split(':');

        execute ="valobj." + namevalue[0] +'=/''+ namevalue[1]+'/';';

        eval(execute);

    }

    return valobj;

}

function OnItemValidator(control)

{

    var regex,maxvalue,minvalue,cvalue;

    var valobj = CreateValObject(control.attr('validator'));

    var value = control.val();

    value = ValidatorConvert(value,valobj.type);

    if(valobj.nonnull=="true")

    {

        if(value == null || value=="")

        {

            ValidatorError(valobj);

            return false;

        }

          

    }

    else

    {

        if(value == null || value=="")

            return true;

    }

    if(valobj.regex != null)

    {

        regex =new RegExp(valobj.regex);

        if(value.match(regex) == null)

        {

            ValidatorError(valobj);

            return false;

        }

      

    }

    if(valobj.min != null)

    {

        minvalue = ValidatorConvert(valobj.min,valobj.type);

        if(!CompareValue(value,minvalue,"req"))

        {

            ValidatorError(valobj);

            return false;

        }

    }

    if(valobj.max != null)

    {

        maxvalue = ValidatorConvert(valobj.max,valobj.type);

        if(!CompareValue(value,maxvalue,"leq"))

        {

            ValidatorError(valobj);

            return false;

        }

    }

    if(valobj.campare != null)

    {

        cvalue = $('#' + valobj.campare).val();

        cvalue = ValidatorConvert(cvalue,valobj.type);

        if(!CompareValue(value,cvalue,valobj.comparetype))

        {

            ValidatorError(valobj);

            return false;

        }

    }

    return true;

  

}

function ValidatorError(valobj)

{

    if(valobj.tipcontrol != null)

        showTip($("#"+ valobj.tipcontrol));

    else

    {

        if(ErrorMessage !='')

            ErrorMessage += '/n';

        ErrorMessage += valobj.tip;

        

    }

}

function CompareValue(leftvalue,rightvalue,compareType)

{

    if(leftvalue == null || rightvalue == null)

        return false;

    if(compareType=="eq")

    {

        return leftvalue == rightvalue;

    }

    else if(compareType =="neq")

    {

        return leftvalue != rightvalue;

    }

    else if(compareType =="le")

    {

        return leftvalue < rightvalue;

    }

    else if(compareType =="leq")

    {

        return leftvalue <= rightvalue;

    }

    else if(compareType =="ri")

    {

        return leftvalue > rightvalue;

    }

    else if(compareType =="req")

    {

        return leftvalue >= rightvalue;

    }

    else

    {

        return false;

    }

  

}

function showTip(control)

{

    if(control.attr('show') != 'on')

    {

        control.fadeIn("slow");

        control.attr('show','on');

    }

}

function hideTip(control)

{

    control.hide();

    control.attr('show','');

}

function ValidatorConvert(value, dataType) {

    var num,exp,m;

    var year,month,day

    if(value == null || value =="")

        return null;

    if(dataType=="int")

    {

        exp=/^[-/+]?/d+$/;

        if (value.match(exp) == null)

            return null;

        num = parseInt(value, 10);

        return (isNaN(num) ? null : num);

    }

    else if(dataType =="number")

    {

        exp=/^[-/+]?((/d+)|(/d+/./d+))$/;

        if (value.match(exp) == null)

            return null;

        num = parseFloat(value);

        return (isNaN(num) ? null : num);

    }

    else if(dataType =="date")

    {

        exp=/^(/d{4})([-/]?)(/d{1,2})([-/]?)(/d{1,2})$/

        m = value.match(exp);

        if (m == null)

        {

            exp=/^(/d{1,2})([-/]?)(/d{1,2})([-/]?)(/d{4})$/

            m = value.match(exp);

            if(m== null)

                return null;

            year = m[5];

            month = m[1];

            day =m[3];

          

        }

        else

        {

            year = m[1];

            month =m[3];

            day = m[5];

        }

        try

        {

            num = new Date(year,month,day);

        }

        catch(e)

        {

            return null;

        }

        return num;

    }

    else

    {

        return value.toString();

    }

}

$(document).ready(

    function(){

      

        $("[@validator]").each(function(i)

                    {

                      

                        var valobj = CreateValObject($(this).attr('validator'));

                        if(valobj.tipcontrol !=null)

                        {

                            $('#' + valobj.tipcontrol).addClass('ErrorTip');

                            hideTip($('#' + valobj.tipcontrol));

                            $("#"+ valobj.tipcontrol).html("<NOBR>"+valobj.tip+"</NOBR>");

                        }

                        $(this).change(function(){

                          

                           if(OnItemValidator($(this)))

                           {

                                if(valobj.tipcontrol !=null)

                                {

                                   hideTip($('#' + valobj.tipcontrol));

                                }

                           }

                           else

                           {

                                if(valobj.tipcontrol !=null)

                                {

                                   showTip($('#' + valobj.tipcontrol));

                                }

                           }

                        });

                      

                      

              

                     }

                );

                      

          $("form").each(function(id)

            {

              

                $(this).submit(function(){return FormValidate(this)});

            }

            );

                    

  

    }

);