JQuery easily implements page element data validation function_jquery

ASP.NET provides a wealth of data validation controls, but this validation function must be used in server controls; it is not very convenient to use when compounding validation data (although drag-and-drop controls are very convenient, the number of drag-and-drops and setting related properties increase. becomes very troublesome). In order to realize the verification function more conveniently and flexibly, I used JQuery to write a simple verification component. When using it, you only need to briefly describe the verification rules, and you don’t need to write a JavaScript to realize the function of the ASP.NET verification control ( Of course, the page must introduce relevant JavaScript files).
Functional goals
Describe specific verification functions through simple custom attribute values, and automatically block and execute the verification function when the Form is submitted. Submit if all members are successfully verified, otherwise cancel the submission.
Simple description of use:
"Text1" type="text" validator="type:string;nonnull:true;tip:Please enter your username!;tipcontrol:nametip" /> validator="type:date;nonnull:true;tip:Please enter the correct date of birth!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />

Implementation points Use the element search function provided by JQuery to easily find the element objects that need to be verified; use the $(document).ready event to complete the initialization and execution of the verification code. Define the verification rule description attributes, and decompose and integrate the relevant verification descriptions during initialization. Block the Form submission process for verification processing, and determine whether to submit data according to the situation. The element object automatically performs verification processing when the onchange event occurs.

Display error information through alert and custom area.

Specific JavaScript code
The implementation code is not complicated and only has a few hundred lines. Since the relevant code is relatively simple, no annotations are written.
Specific code:

Copy the code


The code is as follows:

// JScript 文件 
// 
//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: 
// 
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    { 
        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("" valobj.tip ""); 
                        } 
                        $(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)}); 
            } 
            ); 
    } 
); 

下载相关例程代码