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

网络编程 2024/11/19 佚名

3 2 1

ASP.NET提供了丰富的数据验证控件，但这个验证功能都必须运用在服务器控件中；在复合验证数据时使用也不是很方便（虽然拖放控件很方便，但拖放数增多和设置相关属性就变得很麻烦的事情）。为了更方便灵活地实现验证功能，于是采用了JQuery编写了一个简单验证组件，在使用时只需要简单的描述一下验证规则，并不需要写一句JavaScript就可以实现具备ASP.NET验证控件的功能（当然页面要引入相关JavaScript文件）。
功能目标
       通过简单的自定义属性值描述具体的验证功能，当Form提交自动拦载执行验证功能。如果所有成员验证成功就提交，否则取消提交。
       简单使用描述：
       复制代码代码如下:
<input id="Text1" type="text" validator="type:string;nonnull:true;tip:请输入用户名!;tipcontrol:nametip" />
       <input id="Text2" type="text" validator="type:date;nonnull:true;tip:请输入正确的出生日期!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />

实现要点
       利用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)});
            }
            );
    }
);

下载相关例程代码

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