JQuery는 페이지 요소 데이터 유효성 검사 function_jquery를 쉽게 구현합니다.

ASP.NET은 다양한 데이터 유효성 검사 컨트롤을 제공하지만 이 유효성 검사 기능은 서버 컨트롤에서 사용해야 합니다. 유효성 검사 데이터를 합성할 때 사용하는 것은 그리 편리하지 않습니다. and-drops 및 관련 속성 설정이 매우 번거로워집니다. 검증 기능을 보다 편리하고 유연하게 구현하기 위해 JQuery를 사용하여 간단한 검증 컴포넌트를 작성했습니다. 이를 사용할 때 검증 규칙을 간략하게 설명하면 되며, 기능 구현을 위해 JavaScript를 작성할 필요는 없습니다. ASP.NET 확인 컨트롤(물론 페이지에 관련 JavaScript 파일이 포함되어야 함)
기능적 목표
간단한 사용자 정의 속성 값을 통해 특정 검증 기능을 설명하고, Form이 제출되면 검증 기능을 자동으로 차단하고 실행합니다. 모든 회원이 성공적으로 확인되면 제출하고, 그렇지 않으면 제출을 취소하세요.
간단한 사용 설명:
"Text1" type="text" validator="type:string;nonnull:true;tip:사용자 이름을 입력하세요!;tipcontrol:nametip" /> date;nonnull:true;tip:올바른 생년월일을 입력해주세요!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />

구현 points JQuery에서 제공하는 요소 검색 기능을 사용하면 검증해야 할 요소 객체를 쉽게 찾을 수 있으며, $(document).ready 이벤트를 사용하여 검증 코드의 초기화 및 실행을 완료할 수 있습니다. 검증 규칙 설명 속성을 정의하고, 초기화 시 해당 검증 설명을 분해, 통합합니다. 검증 처리를 위해 Form 제출 과정을 차단하고, 상황에 따라 자료 제출 여부를 결정합니다. 요소 객체는 onchange 이벤트가 발생하면 자동으로 검증 처리를 수행합니다.

경고 및 사용자 정의 영역을 통해 오류 정보를 표시합니다.

특정 JavaScript 코드
구현 코드는 복잡하지 않으며 관련 코드가 비교적 간단하므로 주석을 작성하지 않습니다.

코드 복사


코드는 다음과 같습니다.

// 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; 
함수 FormValidate(양식) 
{ 
    ErrorMessage=''; 
    var 합법성, 항목; 
    합법성 = 사실; 
    항목 = $(form).find("input[@validator]"); 
    for(var i =0;i< items.length;i ) 
    { 
       if(합법성) 
       { 
           합법성 = OnItemValidator($(items[i])); 
       } 
       else 
       { 
            OnItemValidator($(items[i]));     
       } 
    } 
    항목 = $(form).find("textarea[@validator]"); 
    for(var i =0;i< items.length;i ) 
    { 
       if(합법성) 
       { 
           합법성 = OnItemValidator($(items[i])); 
       } 
       else 
       { 
            OnItemValidator($(items[i]));     
       } 
    } 
    항목 = $(form).find("select[@validator]"); 
    for(var i =0;i< items.length;i ) 
    { 
       if(합법성) 
       { 
           합법성 = OnItemValidator($(items[i])); 
       } 
       else 
       { 
            OnItemValidator($(items[i]));     
       } 
    } 
    if(!legality) 
    { 
        if(ErrorMessage !='') 
            alert(ErrorMessage); 
    } 
    반품 합법성; 
} 
함수 CreateValObject(검증기) 
{ 
    var valobj = {  type:'string', 
                 nonnull:false, 
                  regex :null, 
                   최소:null,
                  최대:null, 
                 campare:null,
                  비교 유형: null, 
                   tipcontrol:null, 
                   tip:null}; 
    var 속성; 
    var 실행; 
    var namevalue; 
    속성 = validator.split(';'); 
    for(i=0;i    { 
        namevalue = properties[i].split(':'); 
        ="valobj."를 실행합니다.   이름값[0]  '=''  이름값[1] '';'; 
        평가(실행); 
    } 
    valobj 반환; 
} 
함수 OnItemValidator(control) 
{ 
    var regex,maxvalue,minvalue,cvalue; 
    var valobj = CreateValObject(control.attr('validator')); 
    var value = control.val(); 
    값 = ValidatorConvert(value,valobj.type); 
    if(valobj.nonnull=="true") 
    { 
        if(value == null || value=="") 
        { 
            ValidatorError(valobj); 
            false를 반환합니다. 
        } 
    } 
    else 
    { 
        if(value == null || value=="") 
            return true; 
    } 
    if(valobj.regex != null) 
    { 
        regex =new RegExp(valobj.regex); 
        if(value.match(regex) == null) 
        { 
            ValidatorError(valobj); 
            false를 반환합니다. 
        } 
    } 
    if(valobj.min != null) 
    { 
        minvalue = ValidatorConvert(valobj.min,valobj.type); 
        if(!CompareValue(value,minvalue,"req")) 
        { 
            ValidatorError(valobj); 
            false를 반환합니다. 
        } 
    } 
    if(valobj.max != null) 
    { 
        maxvalue = ValidatorConvert(valobj.max,valobj.type); 
        if(!CompareValue(value,maxvalue,"leq")) 
        { 
            ValidatorError(valobj); 
            false를 반환합니다. 
        } 
    } 
    if(valobj.campare != null) 
    { 
        cvalue = $('#'   valobj.campare).val(); 
        cvalue = ValidatorConvert(cvalue,valobj.type); 
        if(!CompareValue(value,cvalue,valobj.comparetype)) 
        { 
           ValidatorError(valobj); 
            false를 반환합니다. 
        } 
    } 
    true를 반환합니다. 
} 
함수 ValidatorError(valobj) 
{ 
    if(valobj.tipcontrol != null) 
        showTip($("#"  valobj.tipcontrol)); 
    else 
    { 
        if(ErrorMessage !='') 
            ErrorMessage  = 'n'; 
        ErrorMessage  = valobj.tip; 
    } 
} 
함수 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 < 올바른 값; 
    } 
    else if(compareType =="leq") 
    { 
        return leftvalue <= rightvalue; 
    } 
    else if(compareType =="ri") 
    { 
        return leftvalue > 올바른 값; 
    } 
    else if(compareType =="req") 
    { 
        return leftvalue >= rightvalue; 
    } 
    else 
    { 
        false를 반환; 
    } 
} 
함수 showTip(control) 
{ 
    if(control.attr('show') != 'on') 
    { 
        control.fadeIn( "느린"); 
        control.attr('show','on'); 
    } 
} 
function hideTip(control) 
{ 
    control.hide(); 
    control.attr('show',''); 
} 
함수 ValidatorConvert(value, dataType) { 
    var num,exp,m; 
    var 년, 월, 일 
    if(value == null || value =="") 
        return null; 
    if(dataType=="int") 
    { 
        exp=/^[- ]?d $/; 
        if (value.match(exp) == null) 
            null을 반환합니다. 
        num = parseInt(value, 10); 
        return(isNaN(num) ? null : num); 
    } 
    else if(dataType =="number") 
    { 
        exp=/^[- ]?((d )|(d .d ))$/; 
        if (value.match(exp) == null) 
            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) 
               null을 반환; 
            년 = m[5]; 
            월 = m[1]; 
            일 =m[3]; 
        } 
        else 
        { 
            년 = m[1]; 
            월 =m[3]; 
            일 = m[5]; 
        } 
        시도해 보세요 
        { 
            num = 새 날짜(년, 월, 일); 
        } 
        catch(e) 
        { 
            return null; 
        } 
        반환 번호; 
    } 
    else 
    { 
        return value.toString(); 
    } 
} 
$(document).ready( 
    function(){ 
        $("[@validator]").each(function(i) 
                   { 
>      { 
                          $('#'   valobj.tipcontrol).addClass( 'ErrorTip'); 
                         hideTip($('#'   valobj.tipcontrol)); 
                       $("#"  valobj.tipcontrol).html("" valobj.tip "                       } 
                      $(this).change(function(){ 
                      if(OnItemValidator($(this))) 
            > hideTip($('#'   valobj.tipcontrol));   
                           } 
                        } 
                        else 
                         { 
                          if(valobj.tipcontrol !=null) 
                              { 
                                showTip( $('#'  valobj.tipcontrol));   
                            } 
                      } 
                     }); 
                    } 
                ); 
         $("form").each(function(id) 
            { 
              $(this).submit(function(){return FormValidate(this)}); 
           } >            ) ; 
    } 
); 

下载상关例程代码