연습: Web Forms 페이지에서 사용자 입력 유효성 검사

아티클
08/20/2008

업데이트: 2007년 11월

이 연습에서는 ASP.NET 유효성 검사 컨트롤을 사용하여 웹 페이지의 사용자 입력을 검사하는 방법을 설명합니다. 코드 없이 모든 검사를 자동으로 수행하는 일부 컨트롤을 사용합니다. 또한 새로 작성한 코드로 사용자 지정 유효성 검사기를 만들어 페이지의 유효성 검사 프레임워크에 자체 논리를 추가할 수 있는 방법을 보여 줍니다. 마지막으로 사용자가 페이지에서 선택한 항목에 따라 조건부로 사용자 입력의 유효성을 검사할 수 있는 방법을 설명합니다.

이 연습에서는 방문자가 예약을 요청할 수 있는 웹 사이트의 페이지를 만듭니다. 이 연습의 목적은 유효성 검사를 설명하는 것이기 때문에 예약의 성격은 이 연습에서 중요하지 않으며(예를 들어, 레스토랑이나 커뮤니티 센터 회의실 등의 예약일 수 있음) 실제로 이 페이지에서 예약을 처리하지도 않습니다.

만든 페이지는 사용자에게 전자 메일 주소, 예약할 일행 수 및 원하는 날짜를 묻는 메시지를 표시합니다. 사용자는 이 페이지에서 전화 예약 확인을 요청할 수도 있습니다. 구현 시 이 페이지의 기본값은 전자 메일 확인입니다.

보안 정보:
기본적으로 Web Forms 페이지에서는 악의적인 의도를 가진 사용자가 응용 프로그램에 스크립트를 전송하는지 여부를 자동으로 확인합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

이 연습을 통해 다음과 같은 작업 방법을 배웁니다.

유효성 검사 컨트롤을 사용하여 ASP.NET 웹 페이지의 사용자 입력을 검사합니다.
유효성 검사 오류 메시지 표시의 서식을 지정합니다.
코드를 작성하여 사용자 지정 유효성 검사를 만듭니다.

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

Visual Studio와 .NET Framework

웹 사이트 및 페이지 만들기

이 연습의 첫 단계에서는 스타일 작업을 할 수 있는 웹 사이트와 페이지를 만듭니다.

연습: Visual Web Developer에서 기본 웹 페이지 만들기 항목의 단계에 따라 Visual Studio에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 이 연습의 뒷부분에 있는 "컨트롤 추가"로 이동합니다. 그렇지 않으면 다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Studio를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 나타납니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
확인을 클릭합니다.

Visual Studio에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

컨트롤 추가

몇 개 컨트롤만 사용하여 예약에 필요한 정보를 사용자에게 묻는 메시지를 표시합니다.

컨트롤과 텍스트를 추가하려면

디자인 뷰로 전환합니다.
예약 전송과 같은 페이지 제목을 입력합니다.

도구 상자의 표준 그룹에서 다음 컨트롤을 페이지로 끌어와 아래와 같이 속성을 설정합니다.

컨트롤	속성
TextBox	ID: textEmail
TextBox	ID: textNumberInParty
TextBox	ID: textPreferredDate
Button	ID: buttonSubmit Text: Submit Request ValidationGroup: AllValidators
Label	ID: labelMessage Text: (비어 있음)

참고:
페이지의 정확한 레이아웃은 중요하지 않습니다.

텍스트 상자 앞에 캡션으로 사용할 텍스트를 입력합니다.
Submit Request 단추를 두 번 클릭하여 Click 이벤트에 대한 처리기를 만들고, 강조 표시된 다음 코드를 추가합니다.
```
Protected Sub buttonSubmit_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
    If Page.IsValid Then      labelMessage.Text = "Your reservation has been processed."    End If
End Sub
```
```
protected void buttonSubmit_Click(object sender, EventArgs e)
{
    if (Page.IsValid)    {      labelMessage.Text = "Your reservation has been processed.";    }
}
```
이 단추 처리기는 단순히 메시지를 표시하기만 하고 실제 처리를 수행하지 않습니다. 그러나 메시지 표시를 통해 이 연습의 뒷부분에서 유효성 검사의 효과를 테스트할 수 있습니다.
디자인 뷰로 전환한 다음 페이지의 빈 영역을 두 번 클릭하여 Page_Load 처리기를 만들고, 강조 표시된 다음 코드를 추가합니다.
```
Protected Sub Page_Load(ByVal sender As Object, _
    ByVal e As EventArgs)
   labelMessage.Text = ""
End Sub
```
```
protected void Page_Load(object sender, EventArgs e)
{
    labelMessage.Text = "";
}
```
이 코드는 모든 유효성 검사를 통과할 때 페이지에 표시되는 메시지를 지우고 나중에 이 연습에서의 테스트에 도움이 됩니다.

기본 유효성 검사 추가

가상의 예약 시스템에 대해 다음과 같은 유효성 검사를 적용하려고 합니다.

전자 메일 주소는 필수 항목이며 올바른 형식이어야 합니다(예: someone@example.com). 일반적으로 전자 메일 주소가 특정 사용자의 실제 주소인지 확인하는 것은 불가능하지만 해당 주소가 전자 메일 주소의 올바른 패턴을 따르는지 검사할 수 있습니다.
일행 수도 필수 항목이며 숫자여야 합니다.
원하는 날짜는 필수 항목입니다.

자동으로 모든 검사를 수행하고 오류를 표시하는 유효성 검사 컨트롤을 사용하여 이 유효성 검사를 모두 추가할 수 있습니다.

참고:
이 연습의 뒷부분에서는 다른 유효성 검사를 추가하여 사용자가 올바른 날짜를 입력했는지 확인합니다.

기본 유효성 검사를 추가하려면

디자인 뷰로 전환합니다. 도구 상자의 유효성 검사 그룹에서 RequiredFieldValidator 컨트롤을 끌어와 textEmail 텍스트 상자 옆에 놓습니다.

RequiredFieldValidator 컨트롤의 속성을 다음과 같이 설정합니다.

속성	설정값
ControlToValidate	textEmail 유효성을 검사할 내용이 포함된 텍스트 상자에 유효성 검사 컨트롤을 바인딩합니다.
Display	Dynamic 오류를 표시하기 위해 필요한 경우에만 컨트롤이 렌더링되어 페이지의 공간을 차지하도록 지정합니다.
ErrorMessage	전자 메일 주소는 필수 항목입니다. 이 연습의 뒷부분에서 구성하는 요약 오류에 텍스트를 표시합니다.
Text	* 별표는 필드가 필수 항목임을 나타내는 편리한 방법입니다. 이 텍스트는 오류가 있는 경우에만 표시됩니다.
ValidationGroup	AllValidators 라디오 단추와 마찬가지로 유효성 검사기를 하나의 단위로 처리되는 그룹으로 그룹화할 수 있습니다. 유효성 검사기를 그룹화하는 방법은 이 연습의 뒷부분에서 설명합니다.

지금까지 사용자가 전자 메일 주소를 입력했는지 확인하는 테스트를 추가했습니다. 이 유효성 검사 컨트롤은 모든 검사와 오류 표시를 수행하며 페이지에 코드를 추가하도록 요구합니다.

도구 상자의 유효성 검사 그룹에서 RegularExpressionValidator 컨트롤을 끌어와 방금 추가한 RequiredFieldValidator 옆에 놓습니다.

RegularExpressionValidator 컨트롤의 속성을 다음과 같이 설정합니다.

속성	설정값
ControlToValidate	textEmail 전자 메일 상자의 사용자 입력 유효성을 다시 검사합니다.
Display	Dynamic
ErrorMessage	전자 메일 주소는 name@domain.xyz 형식이어야 합니다. 긴 오류 메시지입니다.
Text	잘못된 형식입니다. 짧은 오류 메시지입니다.
ValidationGroup	AllValidators 라디오 단추와 마찬가지로 유효성 검사기를 하나의 단위로 처리되는 그룹으로 그룹화할 수 있습니다. 유효성 검사기를 그룹화하는 방법은 이 연습의 뒷부분에서 설명합니다.

RegularExpressionValidator 컨트롤이 선택되어 있는 상태에서 속성 창의 ValidationExpression 상자에서 줄임표(...) 단추를 클릭합니다.

정규식은 문자열에서 정확히 정의된 패턴을 찾는 데 사용할 수 있는 언어를 구성합니다. RegularExpressionValidator 컨트롤에서 올바른 패턴(이 경우 유효한 전자 메일 주소의 패턴)에 대한 정규식을 정의합니다.

정규식 편집기에는 정규식 구문을 몰라도 유효성 검사 컨트롤을 사용할 수 있도록 자주 사용하는 정규식 목록이 포함되어 있습니다.
표준 식 목록에서 인터넷 전자 메일 주소를 클릭합니다.

유효성 검사 식 상자에 전자 메일 주소에 대한 정규식이 입력됩니다.
확인을 클릭하여 대화 상자를 닫습니다.
1-3단계의 지침을 사용하여 다른 RequiredFieldValidator 컨트롤을 추가합니다. 그러나 이번에는 textNumberInParty 텍스트 상자에 바인딩하고 ErrorMessage 속성을 일행 수를 입력하십시오.로 설정합니다.
도구 상자의 유효성 검사 그룹에서 RangeValidator 컨트롤을 끌어와 방금 추가한 RequiredFieldValidator 옆에 놓습니다.

RangeValidator 컨트롤의 속성을 다음과 같이 설정합니다.

속성	설정값
ControlToValidate	textNumberInParty
Display	Dynamic
ErrorMessage	일행 수에 1에서 20 사이의 숫자를 입력합니다.
MaximumValue	20 이 경우 임의의 큰 값을 입력합니다.
MinimumValue	1 이 응용 프로그램에서 예약하려면 한 명 이상의 사용자가 필요합니다.
Text	1에서 20 사이의 숫자를 입력합니다.
ValidationGroup	AllValidators

RangeValidator 컨트롤은 다음 두 가지 기능을 수행합니다. 사용자가 입력한 데이터가 숫자인지 확인하고 해당 숫자가 지정한 최소값과 최대값 사이에 있는지 확인합니다.

페이지 테스트

이제 지금까지 추가한 유효성 검사 컨트롤을 테스트할 수 있습니다.

기본 유효성 검사를 테스트하려면

Ctrl+F5를 눌러 페이지를 실행합니다.
페이지가 브라우저에 나타나면 Submit Request 단추를 클릭합니다.

일부 필수 필드를 입력하지 않았기 때문에 몇 개의 유효성 검사 오류가 표시됩니다. 즉시 유효성 검사 오류가 표시되며 페이지는 전송되지 않습니다. 기본적으로 유효성 검사 컨트롤은 클라이언트측 ECMAScript(JavaScript)를 페이지에 삽입하여 브라우저에서 유효성 검사를 수행합니다. 이렇게 하면 유효성 검사 오류에 대한 피드백을 사용자에게 즉시 제공할 수 있습니다. 클라이언트 스크립트를 사용하지 않고 유효성 검사 오류를 확인하려면 서버로 라운드트립을 수행해야 하므로 성능이 느려질 수 있습니다. 실제로 클라이언트측 유효성 검사가 모두 성공할 때까지 페이지를 전송할 수 없습니다. 보안을 위해 페이지를 전송할 때 동일한 유효성 검사가 다시 수행됩니다.
잘못된 전자 메일 주소를 입력하여 textEmail 텍스트 상자에 대한 유효성 검사를 수행한 후 사용자 전자 메일 주소와 같은 올바른 전자 메일 주소를 사용하여 다시 유효성 검사를 수행합니다.
일행 수 텍스트 상자에 1에서 20 사이의 숫자 값만 입력할 수 있는지 확인합니다.
올바른 값을 입력했으면 Submit Request 단추를 클릭합니다. 모든 컨트롤에서 유효성 검사가 성공하면 Your reservation has been processed라는 메시지가 표시됩니다.
유효성 검사가 예상대로 작동하는지 확인한 후 브라우저를 닫습니다.

유효성 검사가 예상대로 작동하지 않으면 위에 나열된 모든 속성 설정을 지정했는지 다시 확인한 후 페이지를 다시 실행합니다.

오류 정보를 표시하는 대체 방법

기본적으로 유효성 검사 컨트롤은 내부에 오류 텍스트를 표시합니다. 즉, 페이지의 컨트롤 위치에 컨트롤의 Text 속성 값을 표시합니다. 다른 방법으로 오류 정보를 표시할 수도 있습니다. ASP.NET 유효성 검사 컨트롤은 다음과 같은 추가 옵션을 제공합니다.

모든 유효성 검사 오류를 한 위치에 요약합니다. 내부 오류 표시에 추가로 또는 내부 오류 표시 대신 이 작업을 수행할 수 있습니다. 오류 요약을 표시하면 긴 오류 메시지를 표시할 수도 있습니다.
브라우저에 오류 정보와 함께 팝업 메시지를 표시합니다. 이 옵션은 스크립트 기반 브라우저에서만 실행됩니다.

ValidationSummary 컨트롤을 사용하여 두 표시 옵션을 모두 추가할 수 있습니다. 이 연습 단계에서는 두 표시 기능을 페이지에 모두 추가합니다.

대체 방법으로 유효성 검사 정보를 표시하려면

도구 상자의 유효성 검사 그룹에서 ValidationSummary 컨트롤을 페이지로 끌어 옵니다.
ValidationSummary 컨트롤의 ValidationGroup 속성을 AllValidators로 설정합니다.
페이지를 실행합니다.
이 연습의 앞부분과 동일한 테스트를 수행합니다.

각 오류에 대한 오류 정보는 두 위치에 표시됩니다. 짧은 오류 메시지(유효성 검사기의 Text 속성 값)는 유효성 검사 컨트롤이 있는 위치에 표시됩니다. 긴 오류 메시지(컨트롤의 ErrorMessage 속성 값)는 ValidationSummary 컨트롤에 표시됩니다.
브라우저를 닫습니다.
ValidationSummary 컨트롤의 ShowMessageBox 속성을 true로 설정합니다.
페이지를 실행합니다.
동일한 테스트를 수행합니다.

이번에는 오류가 발생할 때마다 브라우저에 팝업 메시지가 표시됩니다.
브라우저를 닫습니다.

날짜 엔트리를 확인하는 사용자 지정 유효성 검사 추가

ASP.NET 유효성 검사 컨트롤에는 자동으로 올바른 날짜를 확인하는 컨트롤이 포함되지 않습니다. 그러나 CustomValidator 컨트롤을 이러한 용도로 사용할 수 있습니다. 이 사용자 지정 유효성 검사기를 사용하면 응용 프로그램에 필요한 임의의 조건을 확인하는 새 유효성 검사 코드를 작성할 수 있습니다. 이 연습에서는 CustomValidator를 사용하여 사용자가 textPreferredDate 텍스트 상자에 입력한 값을 날짜 값으로 변환할 수 있는지 확인합니다.

두 블록의 사용자 지정 유효성 검사 코드를 추가합니다. 첫 번째 블록은 페이지를 전송할 때 실행되는 사용자 지정 유효성 검사 코드입니다. CustomValidator 컨트롤에 대한 서버측 유효성 검사 논리가 항상 있어야 합니다. 또한 사용자가 즉시 피드백을 받을 수 있도록 브라우저에서 유사한 검사를 수행하는 일부 클라이언트 스크립트(ECMAScript 또는 JavaScript)를 작성합니다.

CustomValidator 컨트롤을 사용하여 올바른 날짜를 확인하려면

도구 상자의 유효성 검사 그룹에서 CustomValidator 컨트롤을 페이지로 끌어와 textPreferredDate 텍스트 상자 옆에 놓습니다.

CustomValidator 컨트롤의 속성을 다음과 같이 설정합니다.

속성	설정값
ControlToValidate	textPreferredDate
Display	Dynamic
ErrorMessage	m/d/yyyy 형식으로 날짜를 입력합니다.
Text	잘못된 날짜 형식입니다(m/d/yyyy 필요).
ValidationGroup	AllValidators

CustomValidator 컨트롤을 두 번 클릭하여 ServerValidate 이벤트에 대한 처리기를 만들고, 강조 표시된 다음 코드를 추가합니다.
```
Protected Sub CustomValidator1_ServerValidate( _
   ByVal source As Object, _
   ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs)
   Try      DateTime.ParseExact(args.Value, "d", Nothing)      args.IsValid = True   Catch      args.IsValid = False   End Try
End Sub
```
```
protected void CustomValidator1_ServerValidate(object source, 
    ServerValidateEventArgs args)
{
    try    {        DateTime.ParseExact(args.Value, "d", null);        args.IsValid = true;    }    catch    {       args.IsValid = false;    }
}
```
이 코드는 사용자가 페이지를 전송할 때 실행되며 처리기에 전달된 ServerValidateEventArgs(args) 개체를 사용하여 유효성 검사 컨트롤과 상호 작용합니다. 사용자가 textPreferredDate 텍스트 상자에 입력한 값은 args 개체의 Value 속성으로 전달됩니다. 사용자 입력이 올바른지 확인한 후 args 개체의 IsValid 속성을 true 또는 false로 설정합니다. false로 설정하면 유효성 검사기가 해당 오류 메시지를 표시합니다.

이 예제의 코드는 try-catch 블록을 사용하여 사용자 입력을 DateTime 개체로 변환할 수 있는지 확인합니다. 사용자가 m/d/yyyy 형식의 날짜를 따르지 않는 잘못된 값을 입력하면 DateTime 개체의 ParseExact 메서드에서 예외를 throw하고 Catch 블록이 실행됩니다.

Button_Click 처리기에 강조 표시된 다음 코드를 추가합니다.

Protected Sub buttonSubmit_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
   If Page.IsValid Then
      labelMessage.Text = "Your reservation has been processed."
   else     labelMessage.Text = "Page is not valid."End If
End Sub

protected void buttonSubmit_Click(object sender, EventArgs e)
{
    if(Page.IsValid)    {
        labelMessage.Text = "Your reservation has been processed.";
    }    else        labelMessage.Text = "Page is not valid."    }
}

CustomValidator 컨트롤을 사용하는 경우 서버측 처리에서 Page.IsValid 속성을 확인하여 모든 유효성 검사가 성공했는지 확인해야 합니다. IsValid 속성은 페이지에 있는 모든 유효성 검사 컨트롤의 누적 상태를 반환하며 모든 유효성 검사가 서버측 처리에 성공했는지 확인하는 데 사용됩니다.

지금까지 올바른 날짜를 확인하기 위해 CustomValidator 컨트롤에 대한 서버측 코드를 추가했습니다. 이 연습의 앞부분에서 확인했듯이 유효성 검사 컨트롤은 또한 클라이언트 스크립트를 사용하여 사용자 입력을 검사합니다. CustomValidator 컨트롤에 클라이언트 스크립트도 추가할 수 있습니다. 실제로 서버측 유효성 검사에서 수행하는 논리를 복제하는 클라이언트 스크립트를 작성합니다. 클라이언트측 사용자 지정 유효성 검사 코드를 작성하는 것이 항상 실용적이지는 않습니다. 예를 들어, 사용자 지정 코드가 서버측 데이터베이스를 조회하여 사용자 입력의 유효성을 검사하는 경우가 있습니다. 그러나 이 경우 서버측 코드와 기본적으로 동일한 검사를 수행하는 클라이언트측 코드를 만들 수 있습니다.

CustomValidator 컨트롤에 클라이언트 스크립트를 추가하려면

Default.aspx를 열거나 이 페이지로 전환합니다.
페이지의 <head> 요소에 다음과 같은 클라이언트 스크립트 블록을 추가합니다.
```
<script language="javascript">
function validateDate(oSrc, args)
{
  var iDay, iMonth, iYear;
  var arrValues;
  arrValues = args.Value.split("/");
  iMonth = arrValues[0];
  iDay = arrValues[1];
  iYear = arrValues[2];

  var testDate = new Date(iYear, iMonth - 1, iDay);
  if ((testDate.getDate() != iDay) ||
      (testDate.getMonth() != iMonth - 1) ||
      (testDate.getFullYear() != iYear))
  {
     args.IsValid = false;
     return;
  }

  return true;
}</script>
```
참고:

ECMAScript(JavaScript)는 대/소문자를 구분합니다. 표시된 대로 코드를 정확하게 입력합니다.

이 코드는 서버측 유효성 검사와 유사하지만 서버측 유효성 검사만큼 엄격하지 않습니다. 사용자 입력은 args 개체의 Value 속성으로 함수에 전달되며 개체의 IsValid 속성을 설정하여 해당 값의 유효성 검사 성공 여부를 나타낼 수 있습니다. 이 예제의 코드는 올바른 숫자 날짜를 입력했는지 확인합니다.

사용자 지정 유효성 검사 코드는 서버 코드에 있을 때와 클라이언트 스크립트에 있을 때 약간의 차이가 있습니다. ECMAScript는 .NET Framework에서와 정확히 같은 기능을 제공하지 않으므로 서버에서 날짜를 검사하는 데 사용하는 DateTime.ParseExact 코드 대신 입력된 날짜를 구문 분석합니다. 그러나 두 유효성 검사(클라이언트 및 서버)는 모두 필요한 기능을 제공합니다.
<asp:customvalidator> 요소에 삽입 지점을 배치하여 선택합니다.
속성 창에서 컨트롤의 ClientValidationFunction 속성을 방금 만든 ECMAScript의 이름인 validateDate로 설정합니다.

지금까지 클라이언트 스크립트에서 실행되어 사용자 입력을 즉시 확인한 다음 페이지를 서버로 전송할 때 다시 실행되는 사용자 지정 유효성 검사를 추가했습니다.

참고:
ECMAScript(JavaScript)는 대/소문자를 구분합니다. 표시된 대로 코드를 정확하게 입력합니다.

사용자 지정 유효성 검사 테스트

이제 사용자 지정 유효성 검사가 제대로 작동하는지 테스트할 수 있습니다.

사용자 지정 유효성 검사를 테스트하려면

CustomValidator 컨트롤의 EnableClientScript 속성을 false로 설정하여 클라이언트측 유효성 검사를 임시로 해제합니다.
Ctrl+F5를 눌러 페이지를 실행합니다.
전자 메일 주소와 일행 수를 입력하여 해당 필드에 대한 유효성 검사가 성공하도록 합니다.
날짜 텍스트 상자에 명확히 날짜가 아닌 문자열을 입력한 다음 Submit Request 단추를 클릭합니다.

페이지가 웹 서버로 라운드트립을 수행하고 서버측 유효성 검사가 실패합니다. IsValid 테스트가 실패하고 labelMessage에서 "페이지가 올바르지 않습니다."라는 메시지를 표시합니다.
올바른 날짜 값(예: 11/17/2005)을 입력하고 단추를 클릭합니다.

이번에는 날짜 값이 유효성 검사에 성공하고 해당 단추의 Click 처리기에서 생성된 확인 메시지가 표시됩니다.
브라우저를 닫습니다.
CustomValidator 컨트롤의 EnableClientScript 속성을 다시 true로 설정하여 클라이언트측 유효성 검사를 다시 설정합니다.

페이지를 다시 실행하고 전자 메일 주소와 일행 수에 올바른 값을 입력합니다.

날짜 텍스트 상자에 잘못된 날짜 값을 입력한 다음 Tab 키를 누릅니다. 단추를 클릭하지 마십시오.

날짜 텍스트 상자가 포커스를 잃으면 즉시 클라이언트측 유효성 검사 스크립트가 실행되며 오류 메시지가 표시됩니다.

참고:
Internet Explorer에서 자동 완성 옵션을 사용하는 경우 자동 완성 목록에서 값을 선택하면 텍스트 상자에 값이 입력되지만 클라이언트측 유효성 검사기는 실행되지 않습니다.

Submit Request 단추를 클릭합니다.

날짜 텍스트 상자에 대한 클라이언트측 유효성 검사가 실패했으므로 페이지는 전송되지 않습니다.
날짜 값을 수정하고 다시 Tab 키를 누릅니다.

오류 메시지가 사라집니다. 이제 폼을 전송할 수 있습니다.

조건에 따른 유효성 검사를 사용하여 선택적 컨트롤 추가

이 연습의 최종 단계에서는 예약 폼에 일부 선택적 정보를 추가합니다. 확인란을 선택하여 전화 예약 확인을 요청할 수 있습니다. 이 경우 전화 번호를 입력해야 합니다. 따라서 이 페이지에는 두 개의 추가 컨트롤인 확인란과 텍스트 상자가 포함됩니다.

이전과 마찬가지로 유효성 검사를 사용하여 사용자 입력을 확인합니다. RequiredFieldValidator 컨트롤을 사용하여 사용자가 전화 번호를 입력했는지 확인하고 RegularExpressionValidator 컨트롤을 사용하여 해당 형식을 확인합니다. 전화 번호는 선택 사항으로, 사용자가 Confirm reservation by phone 확인란을 선택한 경우에만 전화 번호를 확인해야 합니다. 따라서 확인란의 상태에 따라 전화 번호에 대한 유효성 검사를 켜거나 끄는 간단한 코드를 작성합니다.

조건에 따른 유효성 검사를 추가하려면

도구 상자의 표준 그룹에서 CheckBox 컨트롤을 페이지로 끌어와 다음 속성을 설정합니다.

속성	설정값
ID	checkPhoneConfirmation
AutoPostBack	True 사용자가 확인란을 클릭하면 페이지에서 라운드트립을 수행하여 조건에 따라 텍스트 상자와 해당 유효성 검사를 설정합니다.
CausesValidation	False CheckBox를 클릭해도 자동으로 유효성 검사가 실행되지 않습니다.
Text	전화로 예약 확인

TextBox 컨트롤을 페이지의 CheckBox 컨트롤 아래로 끌어와 다음 속성을 설정합니다.
속성
설정값
ID

textPhoneNumber

Enabled

False

사용자가 확인란을 클릭할 때까지 텍스트 상자가 설정되지 않습니다.
전화 번호 텍스트 상자 옆에 캡션으로 사용될 전화 번호: 등의 텍스트를 입력합니다.

속성	설정값
ID	textPhoneNumber
Enabled	False 사용자가 확인란을 클릭할 때까지 텍스트 상자가 설정되지 않습니다.

도구 상자의 유효성 검사 그룹에서 RequiredFieldValidator를 페이지로 끌어와 다음 속성을 설정합니다.

속성	설정값
ID	validatorRequiredPhoneNumber 이 연습의 앞부분에서는 유효성 검사 컨트롤의 ID를 설정하지 않았지만 이 경우 코드에서 유효성 검사 컨트롤을 참조하므로 니모닉 ID를 지정하는 것이 좋습니다.
ControlToValidate	textPhoneNumber
Display	Dynamic
ErrorMessage	전화 번호를 입력해야 합니다.
Text	*
ValidationGroup	(비어 있음) 이 속성이 비어 있으면 해당 유효성 검사기는 페이지의 다른 유효성 검사 컨트롤에 대해 설정한 AllValidators 그룹에 속하지 않습니다. 따라서 buttonSubmit 컨트롤을 클릭할 때 이 유효성 검사기는 기본적으로 선택되지 않습니다.

RegularExpressionValidator 컨트롤을 페이지로 끌어와 다음 속성을 설정합니다.

속성	설정값
ID	validatorRegExPhoneNumber
ControlToValidate	textPhoneNumber
Display	Dynamic
ErrorMessage	전화 번호 형식이 잘못되었습니다.
Text	잘못된 형식입니다.
ValidationExpression	정규식 편집기 대화 상자를 사용하여 미국 전화 번호나 다른 전화 번호 식을 선택합니다.
ValidationGroup	(비어 있음)

checkPhoneConfirmation 컨트롤을 두 번 클릭한 다음 CheckedChanged 이벤트에 대한 처리기를 만들고, 강조 표시된 다음 코드를 추가합니다.

Protected Sub checkPhoneConfirmation_CheckedChanged( _
   ByVal sender As Object, _
   ByVal e As System.EventArgs)
   If checkPhoneConfirmation.Checked = True Then      textPhoneNumber.Enabled = True      validatorRequiredPhoneNumber.ValidationGroup = "AllValidators"      validatorRegExPhoneNumber.ValidationGroup = "AllValidators"   Else      textPhoneNumber.Enabled = False      validatorRequiredPhoneNumber.ValidationGroup = ""      validatorRegExPhoneNumber.ValidationGroup = ""   End If
End Sub

protected void checkPhoneConfirmation_CheckedChanged(
    object sender, EventArgs e)
{
    if(checkPhoneConfirmation.Checked)    {        textPhoneNumber.Enabled = true;        validatorRequiredPhoneNumber.ValidationGroup =             "AllValidators";        validatorRegExPhoneNumber.ValidationGroup = "AllValidators";    }    else    {        textPhoneNumber.Enabled = false;        validatorRequiredPhoneNumber.ValidationGroup = "";        validatorRegExPhoneNumber.ValidationGroup = "";    }
}

사용자가 확인란을 클릭하면 텍스트 상자와 연결된 두 개의 유효성 검사기가 다른 유효성 검사 컨트롤이 속해 있는 유효성 검사 그룹에 추가됩니다. 이렇게 하면 사용자가 페이지를 전송할 때 전화 번호에 대한 유효성 검사기를 포함하여 페이지의 모든 유효성 검사기가 선택됩니다. 사용자가 확인란 선택을 취소하면 해당 유효성 검사기가 그룹에서 제거되므로 Submit Request 단추를 클릭해도 처리되지 않습니다.

조건에 따른 유효성 검사 테스트

이제 조건에 따른 유효성 검사가 제대로 작동하는지 테스트할 수 있습니다.

조건에 따른 유효성 검사를 테스트하려면

Ctrl+F5를 눌러 페이지를 실행합니다.
전자 메일 주소, 일행 수 및 날짜에 올바른 정보를 입력합니다.
Submit Request를 클릭합니다.

페이지가 전송되고 확인 메시지가 표시됩니다.
전화로 예약 확인 확인란을 선택합니다.
Submit Request를 다시 클릭합니다.

이번에는 오류 메시지가 표시됩니다(전화 텍스트 상자 옆에 별표가 표시됨). 확인란을 클릭한 경우 해당 텍스트 상자에 대한 유효성 검사가 설정되었습니다.
잘못된 전화 번호를 입력하고 Submit Request를 다시 클릭하여 텍스트 상자가 잘못된 전화 번호를 허용하지 않는지 확인합니다.
올바른 형식의 전화 번호를 입력하고 전송 단추를 클릭하여 유효성 검사 컨트롤이 올바른 형식의 데이터를 적용하는지 확인합니다.

다음 단계

Web Forms 페이지에 추가한 유효성 검사 컨트롤을 통해 웹 유효성 검사 컨트롤의 기본 개념을 배웠습니다.

유효성 검사의 중요한 측면은 웹 사이트 보안 향상에 미치는 영향을 이해하는 것입니다. 자세한 내용은 웹 응용 프로그램 보안 위협 개요를 참조하십시오.

다음을 통해 공유