[심심풀이]사용자의 입력값에 대한 검사/키보드 입력 제한하기[기초실무닷넷/C#/ASP.NET/ADO.NET/,NET실무기초개발자교육학원추천/C#한번배우세요~]

Client Validation Check 예제(ASP.NET with C#) 

아래 예제는 사용자의 입력을 제한하거나 입력 값의 타당성을 검사하는 예제 입니다. 텍스트 박스 두 개와 버튼을 하나 만들어 각각의 텍스트 박스에 Validator를 달아 타당성을 검사하며(오류가 있는 한목에 Focus를 줌, 오류가 있는 만큼 Alert 창을 띄워 에러를 보임 ) 특히 키보드의 입력을 제한하여 숫자만 입력이 가능하도록 한 예제 입니다 

1.        Visual Studio .NET 2003을 실행 한 후 C#, 웹응용프로그램으로 “ClientValidate”라는 웹프로젝트를 하나 만듭니다. 

2.        화면에 나타나는 기본 web form에 Web form TextBox 컨트롤 2개, 버튼 1개를 위치 시킵니다. 

3.        각각의 TextBox 컨트롤의 오른쪽에 RequiredFieldValidator와 RangeValidator를 선택하여 위치 시킵니다. 

그러니까 TextBox1의 우측에 RequiredFieldValidator1, RangeValidator1 
TextBox2의 우측에 RequiredFieldValidator2, RangeValidator2 가 있다는 이야기죠 

RequiredFieldValidator1 Text속성은 ‘*’, ControlToValidate는 ‘TextBox1’ 
RequiredFieldValidator2 Text속성은 ‘*’, ControlToValidate는 ‘TextBox2’ 

RangeValidator1의 Text속성은 ‘*’, MinimumValue는 1, MaximumValue는 10,Type은 “Integer”로 
RangeValidator2의 Text속성은 ‘*’, MinimumValue는 11, MaximumValue는 2,Type은 “Integer”로 설정 합니다. 

즉 TextBox1에 들어 오는 값은 반드시 있어야 하며 숫자로 1부터 10사이의 수가 들어 와야 한다는 것 입니다. 또한  TextBox2의 경우에도 마찬가지로 11에서 20사의수가 반드시 들어 와야 한다는 것 입니다. 

위에서 RequiredFieldValidator, RangeValidator 컨트롤의 Text속성을 ‘*’로 한 이유는 해당 하는 validation 오류가 발생 한다면 ‘*’가 화면에 Display 되는 효과가 있기 때문 입니다. 

  


4.        이제 애플리케이션을 실행하여 봅니다. 실행 후 웹브라우저에서 소스 보기를 하시면 아마도 아래와 같은 부분이 보일 겁니다. 

<script language="javascript" src="/aspnet_client/system_web/1_1_4322/WebUIValidation.js"></script> 

여기에서 나타내는 것은 닷넷 프레임워크에서의 이미 만든 Validation Control에 대한 default validation script의 위치 입니다. 즉 WebUIValidation.js 파일이 Validation 체크를 수행하는 부분이라는 겁니다. 

5.        이번에는 위에서 이야기한 WebUIValidation.js 스크립트를 재정의해서 우리가 필요로 하는 기능을 구현해 보도록 합니다. C:\inetpub\wwwroot\aspnet_client 폴더에 보시면 WebUIValidation.js 파일이 있을 겁니다 이 파일을 프로젝트 루트 폴더(ClientValidate 폴더)로 복사 합니다. 

  


6.        프로젝트의 web.config 파일을 오픈 후 <system.web> 요소 사이에 다음을 붙여 넣습니다. 

<webControls clientScriptsLocation="./"></webControls> 

7.        이제 웹 애플리케이션을 다시 실행해서 소스 보기를 하면 clientScriptLocation이 바뀌어져 있을 겁니다. 

<script language="javascript" src="./WebUIValidation.js"></script> 

8.        WebUIValidation.js 파일에 다음과 같은 함수를 추가합니다. 이 함수가 하는 일은 위에서 설정한 Validator의 요건에 어긋나는 사용자의 입력 오류가 있는 첫 번째 항목에 포커스가 가게 하는 함수 입니다. 

function ValidatorFocus() 
{ 
    var i; 
    for (i = 0; i < Page_Validators.length; i++) { 
        if (!Page_Validators[i].isvalid) { 
            document.getElementById( 
    Page_Validators[i].controltovalidate).focus(); 
            break; 
        } 
    } 
} 

9.        작성한 함수를 사용자가 서브밋 버튼을 누를 때 호출 되도록 함수에 대한 호출 문을 ValidatorCommonOnSubmit() 함수에 추가 합니다. ValidatorCommonOnSubmit 함수는 사용자가 Submit 버튼을 누르면 저절로 호출 되도록 HTML 소스에서 설정 되어 있습니다. (웹 브라우저에서 소스 보기 한 후 확인 하세요~) 

아마 다음 부분이 자동으로 HTML 소스에 생성 되어 있을 겁니다. 

function ValidatorOnSubmit() { 
    if (Page_ValidationActive) { 
        ValidatorCommonOnSubmit(); 
    } 
} 

  이제 아래 함수를 수정 하세요~ 

function ValidatorCommonOnSubmit() { 
    event.returnValue = !Page_BlockSubmit; 
    Page_BlockSubmit = false; 
    
    ValidatorFocus();  - 이 부분을 추가 해 주세요… 
} 



10.        이제 애플리케이션을 실행 후 범위에 어긋나는 숫자나 값을 입력하지 않고 버튼을 눌러 봅니다… 
  

99가 범위에 맞지 않은 경우 입니다. 

11.        이번에는 Invalid Validator인 경우 위 처럼 “*”를 출력하는 것이 아니라 실제 오류 내역을 보여 줄 수 있도록 함수 하나를 만들고 이를 ValidatorCommonOnSubmit에 호출 부분을 추가 하도록 합니다. 

function ValidatorIndividualAlert() 
{ 
    var i, j, k, tmp; 
    
    //버블 정렬(오류 디스플레이가 위에것 부터(먼제 만든 객체 부터) 되게..._ 
    for(j = 0; j < Page_Validators.length-1; j++) { 
        for(k =0; k<j; k++) { 
                if (Page_Validators[j].id < Page_Validators[k].id) { 
                  tmp = Page_Validators[j]; 
                  Page_Validators[j] = Page_Validators[k]; 
                  Page_Validators[k] = tmp; 
                } 
        } 
    } 


    for (i = 0; i < Page_Validators.length; i++) { 
        if (!Page_Validators[i].isvalid) { 
    var msg; 
    msg = Page_Validators[i].errormessage; 
    if(!msg) 
        msg = Page_Validators[i].id 
    
    alert(msg); 
            //break; 
        } 
    } 
} 
ValidatorCommonOnSubmit()에 위의 함수에 대한 호출 부를 추가합니다. 

function ValidatorCommonOnSubmit() { 
    event.returnValue = !Page_BlockSubmit; 
    Page_BlockSubmit = false; 
    
    ValidatorFocus(); 
    ValidatorIndividualAlert();   이 부분이 추가 되었습니다. 
} 


12.        실행 하기 전에 TextBox1, TexztBox2의 errormessage 속성을 적절히 수정 합니다. 

RangeValidator1의 ErrorMessage는 “TextBox1의 수는 1부터 10사이의 수만 허용 합니다.” 
RangeValidator2의 ErrorMessage는 “TextBox2의 수는 11부터 20사이의 수만 허용 합니다.” 

RequiredFieldValidator1의 ErrorMessage는 “TextBox1은 필수 입력 입니다” 
RequiredFieldValidator2의 ErrorMessage는 “TextBox2는 필수 입력 입니다” 


13.        실행 후 웹브라우저에서 입의의 수를 입력 하여 Alert 창이 뜨는 것을 확인 합니다. 

14.        이번에는 키보드의 입력을 제어하여 TextBox1과 TextBox2에는 숫자만 입력되고 영문자를 입력하는 경우에는 입력이 되지 않도록 제한 하도록 해 보겠습니다. 

아래의 두 함수를 WebUIValidation.js에 추가 합니다. 

function NumericDataOnly() 
{ 
  var key = window.event.keyCode; 

  if ( key > 47 && key < 58 ) 
      return; 
  else 
      window.event.returnValue = null; 
} 

function EnableNumericValidation() 
{ 
    var i; 
    for (i = 0; i < Page_Validators.length; i++) { 
        if (Page_Validators[i].type == "Integer") { 
            document.getElementById( 
    Page_Validators[i].controltovalidate).onkeypress 
      = NumericDataOnly; 
        } 
    } 
} 

    다음으로 할일은 호출 부에서 호출을 하도록 하면 되는데… ValidatorOnLoad() 함수를 
찾아 EnableNumericValidation();를 추가 합니다. 

        function ValidatorOnLoad() { 
    if (typeof(Page_Validators) == "undefined") 
        return; 
    var i, val; 
    for (i = 0; i < Page_Validators.length; i++) { 
        val = Page_Validators[i]; 
        if (typeof(val.evaluationfunction) == "string") { 
            eval("val.evaluationfunction = " + val.evaluationfunction + ";"); 
        } 
        if (typeof(val.isvalid) == "string") { 
            if (val.isvalid == "False") { 
                val.isvalid = false;                                
                Page_IsValid = false; 
            } 
            else { 
                val.isvalid = true; 
            } 
        } else { 
            val.isvalid = true; 
        } 
        if (typeof(val.enabled) == "string") { 
            val.enabled = (val.enabled != "False"); 
        } 
        ValidatorHookupControlID(val.controltovalidate, val); 
        ValidatorHookupControlID(val.controlhookup, val); 
    } 
    
    EnableNumericValidation();   이 부분에 추가 합니다. 
    
    Page_ValidationActive = true; 
} 

15.        웹 애플리케이션을 실행하여 숫자가 아닌 문자를 입력하면 입력이 되지 않음을 확인 할 수 있습니다. 

	[100%환급,실무전문]SQL/빅데이터/자바/스프링/웹퍼블리싱/안드…	오라클자바…	12-27	2878
	[채용확정무료교육]오라클자바개발잘하는신입뽑기2개월과정,교육…	오라클자바…	12-11	2098
53	[평일100%환급7건]웹퍼블리싱,자바&JSP,안드로이드,C#닷넷,SQL기…	오라클자바…	03-15	1955
52	[주말]C#,ASP.NET마스터	오라클자바…	01-31	2093
51	[기업100%환급,평일주간]SQL기초에서스키마오브젝트,PLSQL,힌트…	오라클자바…	01-31	3063
50	[주말주간]자바&웹,jQUERY,스프링프레임워크,마이바티스	오라클자바…	01-31	1617
49	[평일주간/야간,주말주간/야간]Spring,MyBatis,Hibernate개발자…	오라클자바…	01-19	1941
48	[평일주간/야간,주말주간/야간]안드로이드개발자과정(Adnroid 교…	오라클자바…	01-11	1808
47	[평일야간,주말주간야간]JAVA,Network&JSP&Spring,MyBatis,Hiber…	오라클자바…	01-03	2414
46	[100%환급,실무전문]SQL/빅데이터/자바/스프링/웹퍼블리싱/안드…	오라클자바…	12-27	2878
45	[주말야간]개발자를위한PLSQL,SQL튜닝,힌트(토/일)	오라클자바…	12-19	2021
44	[평일주간/야간,주말주간/야간]웹퍼블리싱 마스터(HTML5,CSS3,jQ…	오라클자바…	12-14	1988
43	[채용확정무료교육]오라클자바개발잘하는신입뽑기2개월과정,교육…	오라클자바…	12-11	2098
42	[주말야간]JAVA,JSP,Spring,PLSQL,힌트,웹퍼블리싱,안드로이드,…	오라클자바…	12-09	1632
41	[평일야간,주말야간]닷넷(C#,Network,ADO.NET,ASP.NET)마스터	오라클자바…	12-01	1853
40	[기업100%환급]오라클&자바웹스프링신입과정3주(SQL,JAVA,JSP,Se…	오라클자바…	12-01	2098
39	[평일야간,주말]SQL기초에서실무까지(SQL기초,PLSQL,힌트,튜닝)	오라클자바…	12-01	1505