8 ASP.NET 유효성 검사 컨트롤
사용자로부터 정확한 데이터만을 입력 받기 위한 기능을 좀 더 사용하기 편하도록 제공하는 유효성 검사 컨트롤을 공부해보겠습니다.
8.1 소개 웹 응용 프로그램을 제작할 때 빈번하게 작업해야 하는 일 중에는 텍스트박스에 반드시 값을 입력 받거나, 정확한 데이터가 들어오도록 유도하는 유효성 검사(Validation)가 있습니다. 유효성 검사는 일반적으로 클라이언트 스크립트 언어인 JavaScript나 jQuery 등을 사용하여 처리하는데 시간과 노력이 많이 드는 단점이 있습니다. 이에 대해서 ASP.NET 서버 컨트롤에는 유효성 검사 컨트롤이 있어서 손쉽게 유효성 검사를 할 수 있습니다. 개발자의 생산성도 높아진다. 물론, JavaScript 유효성 검사와 ASP.NET 유효성 검사 컨트롤을 같이 사용하여 놓치는 부분이 없는지 확인하면서 좀 더 안정된 응용 프로그램을 만들 수도 있습니다.
8.2 유효성 검사 컨트롤의 종류 ASP.NET에서 제공하는 유효성 검사 컨트롤은 다음과 같습니다.
표 9 1 유효성 검사 컨트롤의 종류 유효성 검사 컨트롤 설명 RequiredFieldValidator (입력 확인 유효성 검사) 컨트롤 값을 반드시 입력 받고자 할 때 사용 RangeValidator (범위 확인 유효성 검사) 컨트롤에 들어올 값의 범위를 지정할 때 사용 CompareValidator (비교 확인 유효성 검사) 두 컨트롤의 값을 비교하는 데 사용 RegularExpressionValidator (정규식 확인 유효성 검사) 컨트롤에 입력 되는 데이터가 정규식에 맞는지 검사하는 데 사용 CustomValidator (사용자 정의 유효성 검사) ASP.NET에서 제공되지 않는 기능을 추가적으로 만들어 사용하고자 할 때 사용 Dynamic Validator (동적 유효성 검사) 동적으로 유효성 검사를 추가할 때 사용 ValidationSummary (유효성 검사 요약) 현재 웹 폼에 정의된 유효성 검사 컨트롤의 에러 메시지를 화면에 모아서 출력하고자 할 때 사용
8.3 BaseValidator 클래스: 유효성 검사 컨트롤의 부모 클래스 ASP.NET의 유효성 검사 컨트롤은 대부분 BaseValidator 클래스의 모든 기능을 상속하므로 다음과 같은 공통 속성을 사용하며, 이 공통 속성은 반드시 설정해야 합니다.
표 9 2 유효성 검사 관련 기본 클래스의 멤버 속성 설명 ControlToValidate 유효성 검사 대상이 되는 입력 컨트롤의 ID 속성을 지정합니다. Display 웹 브라우저에 에러 메시지가 어떻게 표현될지를 결정합니다.
- None : 에러 메시지를 표시하지 않습니다.
- Static : 문자열의 길이만큼 공간을 차지하여 출력합니다.
- Dynamic : 에러가 출력되는 순간에 문자열의 길이가 늘어난다. ErrorMessage 유효성 검사 실패 시 나타나는 에러 메시지를 지정합니다. ForeColor 에러 메시지의 글자색을 지정합니다. ValidationGroup 웹 폼 하나에서 여러 그룹으로 묶어서 유효성 검사를 수행하고자 할 때 각각의 컨트롤과 유효성 검사 컨트롤의 ValidationGroup 속성을 똑같이 구성합니다. SetFocusOnError 유효성 검사를 통과하지 못한 컨트롤에 포커스를 줄지 여부를 설정합니다.
8.4 유효성 검사 사용 준비 유효성 검사 컨트롤을 사용하려면 다음 3단계를 거쳐야 합니다. 세부 진행 사항은 다음에 진행할 실습에서 알아보겠지만, 간단히 정리하면 다음과 같습니다.
<번호스타일>
- NuGet 패키지 관리자를 사용하여 jQuery를 추가합니다.
- NuGet 패키지 관리자를 사용하여 AspNet.ScriptManager.jQuery를 추가합니다.
- 웹 프로젝트 루트에 있는 Global.asax 파일의 Application_Start() 이벤트에 다음 코드를 입력합니다. System.Web.UI.ValidationSettings.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms; </번호스타일>
다음은 Global.asax 파일의 Application_Start 이벤트 처리기에 3번 코드를 입력한 그림입니다. 그림 8 1 Application_Start() 이벤트 처리기에 코드 입력
추가 학습: 아래와 같은 오류 발생 시 해결 방법: WebForms UnobtrusiveValidationMode에는 'jquery'에 대해 ScriptResourceMapping이 필요합니다. 이름이 jquery(대/소문자 구분)인 ScriptResourceMapping을 추가하십시오.
Web.config 파일에 아래 코드 추가
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
8.5 [실습] 유효성 검사 컨트롤 학습을 위한 웹 사이트 생성하기 8.5.1 소개 유효성 검사 컨트롤 학습을 위한 웹 프로젝트를 생성해보겠습니다.
<참고> 이번 내용을 "ASP.NET 웹 폼 - 유효성 검사 관련 기본 참조들 추가"라는 제목의 동영상 강좌로도 마련하였으니 참고하기 바랍니다.
https://youtu.be/4hvQoggLAtI </참고>
8.5.2 따라하기 1: 웹 프로젝트 생성 및 기본 페이지 작성 ① Visual Studio를 실행하고 ASP.NET 웹 응용 프로그램을 다음과 같이 생성합니다. 이름 위치 ASP.NET 템플릿 선택 폴더 및 핵심 참조 추가 DevValidationControl C:\ASP.NET ASP.NET 4.6 템플릿-Empty Web Forms
② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음과 같이 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmValidationControl.aspx
③ FrmValidationControl.aspx 파일에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmValidationControl.aspx.cs" Inherits="DevValidationControl.FrmValidationControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>유효성 검사 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>ASP.NET 4.5 이상에서 유효성 검사 컨트롤 사용하기</h1>
<ol>
<li>PM> Install-Package jQuery</li>
<li>PM> Install-Package AspNet.ScriptManager.jQuery</li>
<li>Global.asax - Application_Start(): <br />
System.Web.UI.ValidationSettings.UnobtrusiveValidationMode =
System.Web.UI.UnobtrusiveValidationMode.WebForms;</li>
</ol>
</div>
</form>
</body>
</html>
④ FrmValidationControl.aspx.cs 파일은 따로 코드를 입력하지 않습니다.
⑤ FrmValidationControl.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다.
그림 8 2 유효성 검사 컨트롤 기본 페이지 실행
8.5.3 따라하기 2: 유효성 검사 컨트롤 사용을 위한 필수 단계 진행 웹 사이트에 유효성 검사 컨트롤을 사용하려면 선수 작업으로 다음 3단계를 거쳐야 합니다. ① <Visual Studio 2019 > 도구 > NuGet 패키지 관리자 > 패키지 관리자 콘솔>에서 다음 명령어를 실행하여 빈 웹 사이트에 jQuery 자바스크립트 라이브러리를 추가합니다. 참고로 설치되는 버전은 상관 없습니다. PM> Install-Package jQuery
② NuGet 패키지 콘솔에 다음 명령어를 실행하여 ASP.NET ScriptManager를 추가합니다. PM> Install-Package AspNet.ScriptManager.jQuery
그림 8 3 패키지 관리자 콘솔 창
③ 프로젝트 루트에 있는 Global.asax 파일을 실행합니다. Application_Start 이벤트 핸들러 코드에 다음과 같은 코드를 입력합니다. <코드> using System;
namespace DevValidationControl { public class Global : System.Web.HttpApplication { protected void Application_Start(object sender, EventArgs e) { // [!] ASP.NET 4.5 이상에서 유효성 검사 컨트롤 사용하기 // [1] PM> Install-Package jQuery // [2] PM> Install-Package AspNet.ScriptManager.jQuery // [3] Global.asax - Application_Start() System.Web.UI.ValidationSettings.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms; } } }
④ 이렇게 3단계를 진행하면 현재 웹 사이트에서 ASP.NET의 유효성 검사 컨트롤을 사용할 수 있습니다. 일단 이번 실습은 여기까지 진행하고, 다음 실습에서 유효성 검사 컨트롤의 종류를 하나씩 살펴보겠습니다.
8.5.4 마무리
이번 강의에서 이루어질 모든 실습 웹 페이지는 DevValidationControl 웹 프로젝트에 제작합니다. 유효성 검사 컨트롤이 다른 컨트롤과 다른 점은 기본적으로 사용이 안 되도록 설정되어 있으며, 따라하기 2에서 진행한 3단계를 수행해야만 해당 웹 프로젝트에서 ASP.NET Web Forms 유효성 검사 컨트롤을 사용할 수 있다는 점입니다.
8.6 RequiredFieldValidator 컨트롤
8.6.1 입력 확인 유효성 검사 컨트롤 소개
입력 확인 유효성 검사 컨트롤은 반드시 입력 받아야 하는 값을 확인하는 컨트롤입니다. JavaScript 같은 클라이언트 스크립트 언어를 사용하면 적어도 코드를 10줄 이상 작성해야 구성할 수 있는 내용인데 입력 확인 유효성 검사 컨트롤을 사용하면 마우스 클릭 몇 번만으로도 구성할 수 있습니다.
8.6.2 주요 속성
속성 설명
InitialValue 기본값으로 제공되는 텍스트를 입력해놓고 이 값이 남아 있으면 유효성 검사를 통과시키지 않고, 새로운 값을 입력해야 통과시킵니다.
8.7 [실습] RequiredFieldValidator 컨트롤을 사용한 아이디 및 암호 입력 확인
8.7.1 소개
로그인 페이지를 예로 들어봅니다. 아이디와 암호에 반드시 유효한 값을 입력 받도록 설정하는 기능을 구현해보겠습니다.
8.7.2 따라하기
① DevValidationControl 프로젝트를 열고, 다음 웹 폼 페이지를 추가합니다.
② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmRequiredFieldValidator.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmRequiredFieldValidator.aspx
③ FrmRequiredFieldValidator.aspx 페이지를 열고 다음과 같이 입력합니다.
```csharp FrmRequiredFieldValidator.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmRequiredFieldValidator.aspx.cs"
Inherits="DevValidationControl.FrmRequiredFieldValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>입력 확인 유효성 검사 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>입력 확인 유효성 검사 컨트롤</h3>
아이디:
<asp:TextBox ID="txtUserId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valUserId" runat="server"
ControlToValidate="txtUserId"
ErrorMessage="아이디를 입력하시오."
Display="Static"></asp:RequiredFieldValidator>
(필수)
<br />
암호:
<asp:TextBox ID="txtPassword" runat="server"
TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="valPassword" runat="server"
ControlToValidate="txtPassword"
Display="Dynamic"
ErrorMessage="암호를 입력하시오."></asp:RequiredFieldValidator>
(필수)
<hr />
<asp:LinkButton ID="btnLogin" runat="server"
OnClick="btnLogin_Click">로그인</asp:LinkButton>
</div>
</form>
</body>
</html>
참고로 웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 TextBox ID txtUserId RequiredFieldValidator ID valUserId ControlToValidate txtUserId ErrorMessage 아이디를 입력하시오. TextBox ID txtPassword RequiredFieldValidator ID valPassword ControlToValidate txtPassword ErrorMessage 암호를 입력하시오. Button ID btnLogin Text 로그인
④ FrmRequiredFieldValidator.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
using System.Web.UI;
namespace DevValidationControl
{
public partial class FrmRequiredFieldValidator : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// SetFocus() 메서드 : 아이디 텍스트박스에 포커스
Page.SetFocus(txtUserId);
}
}
protected void btnLogin_Click(object sender, EventArgs e)
{
// IsValid 속성 : 유효성 검사가 통과되면 true를 반환
if (Page.IsValid)
{
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"alertMessage",
"<script>alert('통과');</script>");
}
}
}
}
Page.SetFocus() 메서드는 특정 컨트롤에 포커스를 주는 기능을 합니다.
Page.ClientScript.RegisterClientScriptBlock() 메서드는 특정 자바스크립트 코드를 실행하는 기능을 하는데 첫 번째 매개변수의 값은 기본입니다. 두 번째 매개변수의 값은 JavaScript 코드에 대한 구분자를 넣어줍니다. 마지막 매개변수의 값은 <script> 태그를 포함한 자바스크립트 코드가 들어옵니다.
⑤ FrmRequiredFieldValidator.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하고 로그인 링크버튼을 클릭하면 웹 브라우저에 다음과 같이 출력됩니다. 정확한 데이터를 입력한 후 <로그인> 버튼을 클릭하면 유효성 검사를 통과했다는 메시지가 출력됩니다.
그림 8 4 FrmRequiredFieldValidator.aspx 페이지 실행 결과
8.7.3 마무리 지금까지 계속 컨트롤을 배우고 있습니다. 컨트롤의 사용 목적이 무엇인가? 바로 사용의 편리성입니다. 입력 확인 유효성 검사 컨트롤 같은 기능을 웹 페이지에 적용하려면 직접 코드를 작성해야 합니다. 하지만 ASP.NET에서는 반복 작업을 줄이고자 이러한 컨트롤을 제공하는 것입니다. 물론 ASP.NET 이전에 JavaScript를 사용하는 방법이 더 친숙하다면 그 방법을 사용해도 결과는 같습니다.
8.8 RangeValidator 컨트롤 범위 확인 유효성 검사 컨트롤을 사용하면 데이터를 입력 받을 때 특정 범위의 데이터만 요청할 수 있습니다. 참고로 다음 샘플 코드는 RangeValidator 컨트롤 사용 전에 순수 JavaScript로 1~150까지의 정수만 입력 받도록 처리하는 내용을 구현한 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript로 범위 확인하기</title>
<meta charset="utf-8" />
<script>
function CheckLogin() {
// 값을 받아서 정수형으로 변환
var varAge = parseInt(document.getElementById("txtAge").value);
if (varAge < 1 || varAge > 150) {
alert("나이는 1~150까지 입력하시오.");
document.getElementById("txtAge").focus(); // 포커스
return false; // 멈춤
}
return true; // 진행
}
</script>
</head>
<body>
<form id="frmLogin" action="#" method="post" onsubmit="return CheckLogin();">
나이 : <input type="text" id="txtAge" name="txtAge" value="0" />(1~150)<br />
<input type="submit" value="체크" />
</form>
</body>
</html>
그림 8 5 JavaScript로 범위 확인하기
8.9 [실습] RangeValidator 컨트롤을 사용한 나이 및 학점 입력 검사 8.9.1 소개 회원가입 페이지를 예로 들어서 정확한 나이와 학점을 입력 받는 기능을 구현해보겠습니다.
8.9.2 따라하기 ① DevValidationControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmRangeValidator.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmRangeValidator.aspx
③ FrmRangeValidator.aspx 페이지를 열고 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmRangeValidator.aspx.cs"
Inherits="DevValidationControl.FrmRangeValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>범위 확인 유효성 검사 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>범위 확인 유효성 검사 컨트롤</h3>
나이:
<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
<asp:RangeValidator ID="valAge" runat="server"
ControlToValidate="txtAge"
ErrorMessage="나이는 1~150 사이의 정수입니다."
MinimumValue="1" MaximumValue="150" Type="Integer"
Display="Static"
SetFocusOnError="true"></asp:RangeValidator>
<br />
학점:
<asp:TextBox ID="txtScore" runat="server"></asp:TextBox>
<asp:RangeValidator ID="valScore" runat="server"
ControlToValidate="txtScore"
ErrorMessage="학점은 A부터 F까지입니다."
MinimumValue="A" MaximumValue="F" Type="String"
></asp:RangeValidator>
<hr />
<asp:LinkButton ID="btnCheck" runat="server">체크</asp:LinkButton>
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음 표와 같습니다. 컨트롤 속성 값 TextBox ID txtAge RangeValidator ID valAge ControlToValidate txtAge ErrorMessage 나이는 1~150 사이의 정수입니다. MaximumValue 150 MinimumValue 1 TextBox ID txtScore RangeValidator ID valScore ControlToValidate txtScore ErrorMessage 학점은 A부터 F까지입니다. MaximumValue F MinimumValue A Button ID btnCheck Text 체크
④ FrmRangeValidator.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
⑤ FrmRangeValidator.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 정확한 데이터를 입력한 후 <확인> 버튼을 클릭하면 에러 메시지가 출력되지 않습니다. 페이지가 깜빡거린 뒤 다시 게시(포스트백)됩니다.
그림 8 6 FrmRangeValidator.aspx 페이지 실행 결과
8.9.3 마무리 나이, 학점 같이 특정한 범위의 데이터만 입력 받고자 할 때는 범위 확인 유효성 검사 컨트롤을 적절히 사용하면 됩니다.
8.10 CompareValidator 컨트롤 비교 확인 유효성 검사 컨트롤은 암호와 암호 확인처럼 정확한 데이터를 입력했는지 확인하기 어려운 경우 두 번 입력하여 두 데이터가 같을 때만 통과시킵니다.
8.11 [실습] CompareValidator 컨트롤을 사용하여 암호 확인하기 8.11.1 소개 회원 가입 시 암호와 암호 확인 기능을 구현해보겠습니다.
8.11.2 따라하기 ① DevValidationControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmCompareValidator.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmCompareValidator.aspx
③ FrmCompareValidator.aspx 페이지를 열고 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmCompareValidator.aspx.cs"
Inherits="DevValidationControl.FrmCompareValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>비교 확인 유효성 검사 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>비교 확인 유효성 검사 컨트롤</h3>
암호:
<asp:TextBox ID="txtPassword" runat="server"
TextMode="Password"></asp:TextBox><br />
암호 확인:
<asp:TextBox ID="txtPasswordConfirm" runat="server"
TextMode="Password"></asp:TextBox>
<asp:CompareValidator ID="varPasswordConfirm" runat="server"
ControlToValidate="txtPasswordConfirm"
ControlToCompare="txtPassword"
SetFocusOnError="true"
ErrorMessage="암호를 다시 확인해 주세요."></asp:CompareValidator>
<hr />
<asp:Button ID="btnConfirm" runat="server" Text="확인" />
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 TextBox ID txtPassword TextMode Password TextBox ID txtPasswordConfirm TextMode Password CompareValidator ID valPasswordConfirm ControlToValidate txtPasswordConfirm ErrorMessage 암호를 다시 확인해주세요. ControlToCompare txtPassword SetFocusOnError True Button ID btnConfirm Text 확인
④ FrmCompareValidator.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
⑤ FrmCompareValidator.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 암호 텍스트박스와 암호 확인 텍스트박스의 값을 똑같이 입력한 후 <확인> 버튼을 누른다. 유효성 검사를 통과하면 에러 메시지가 출력되지 않습니다. 페이지가 깜빡거린 뒤 다시 게시됩니다.
그림 8 7 FrmCompareValidator.aspx 페이지 실행 결과
8.11.3 마무리 이해하기 어렵지 않은 실습입니다. 지금까지 해온 많은 실습은 앞으로 제작할 웹 사이트의 요소로 사용할 기능들입니다. 훈련이라고 생각하고 하나씩 하나씩 반드시 따라 해보길 바랍니다.
8.12 RegularExpressionValidator 컨트롤 정규식 확인 유효성 검사 컨트롤은 이메일, 홈페이지 URL, 주민등록번호, 카드번호 같이 일정한 규칙이 있는 데이터를 입력 받고자 할 때 유용하게 사용할 수 있습니다.
8.13 [실습] RegularExpressionValidator 컨트롤로 이메일 및 홈페이지 검사 8.13.1 소개 회원가입 페이지에서 정확한 형식의 이메일과 홈페이지 주소를 입력 받는 기능을 구현해보겠습니다.
8.13.2 따라하기 ① DevValidationControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmRegularExpressionValidator.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmRegularExpressionValidator.aspx
③ FrmRegularExpressionValidator.aspx 페이지에 다음과 같이 입력합니다. ValidationExpress 속성에 들어가는 정규식은 일반적인 이메일과 URL에 대한 처리를 해주는 코드입니다. 정규식 구문을 검색해보면 더 많은 구문을 살펴볼 수 있습니다. 이 책에서는 따로 정규식에 대한 내용은 다루지 않겠다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmRegularExpressionValidator.aspx.cs"
Inherits="DevValidationControl.FrmRegularExpressionValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>정규식 확인 유효성 검사 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>정규식 확인 유효성 검사 컨트롤</h3>
이메일:
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="valEmail" runat="server"
ErrorMessage="이메일을 정확히 입력하시오."
ControlToValidate="txtEmail"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
></asp:RegularExpressionValidator>
<br />
홈페이지:
<asp:TextBox ID="txtHomePage" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="valHomePage" runat="server"
ErrorMessage="홈페이지를 정확히 입력하시오."
ControlToValidate="txtHomePage"
ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?"
></asp:RegularExpressionValidator>
<hr />
<asp:LinkButton ID="btnOK" runat="server">확인</asp:LinkButton>
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 TextBox ID txtEmail RegularExpressionValidator ID valEmail ControlToValidate txtEmail ErrorMessage 이메일을 정확히^^ ValidationExpression (인터넷 전자 메일 주소) TextBox ID txtHomePage RegularExpressionValidator ID valHomePage ControlToValidate txtHomePage ErrorMessage 홈페이지를 정확히^^ ValidationExpression (인터넷 URL) Button ID btnOK Text 확인
④ FrmRegularExpressionValidator.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
⑤ FrmRegularExpressionValidator.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 정확한 데이터를 입력한 후 <확인> 버튼을 클릭합니다. 유효성 검사를 통과하면 에러메시지가 출력되지 않고 페이지가 깜빡거린 뒤 다시 게시됩니다.
그림 8 8 FrmRegularExpressionValidator.aspx 페이지 실행 결과
8.13.3 마무리 정규식(regular expression)은 특정한 패턴을 찾는데 상당히 유용하지만, 학습법이 좀 까다롭다. 우선은 이메일/홈페이지/우편번호/전화번호 등의 값을 검사하는 정도로만 알고 있어도 되므로 이 책에서는 따로 설명하지 않겠다. 만약 정규식에 대해서 더 많은 정보를 얻고자 한다면 정규식을 검색해보기 바랍니다.
8.14 CustomValidator 컨트롤 사용자 정의 유효성 검사 컨트롤은 ASP.NET에서 기본으로 제공하지 않는 추가 기능을 구현하고자 할 때 사용자가 직접 로직을 구현하고, 구현된 로직을 사용할 수 있도록 해줍니다.
8.15 [실습] CustomValidator 컨트롤로 짝수 데이터만 입력 받기 8.15.1 소개 짝수, 홀수 데이터만 받고자할 때 해당 데이터를 검사하는 로직을 구현해보겠습니다.
8.15.2 따라하기 ① DevValidationControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmCustomValidator.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmCustomValidator.aspx
③ FrmCustomValidator.aspx 페이지를 열고 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmCustomValidator.aspx.cs"
Inherits="DevValidationControl.FrmCustomValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>사용자 정의 유효성 검사 컨트롤</title>
<script>
function FuncValidationOddNumber(source, args) {
if (parseInt(args.Value) % 2 == 1) {
args.IsValid = true; // 유효성 검사 통과
}
else {
args.IsValid = false; // 유효성 검사 실패
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>사용자 정의 유효성 검사 컨트롤</h3>
짝수만 입력:
<asp:TextBox ID="txtEvenNumber" runat="server"></asp:TextBox>
<asp:CustomValidator ID="valEvenNumber" runat="server"
ErrorMessage="짝수만 입력하시오."
ControlToValidate="txtEvenNumber"
OnServerValidate="valEvenNumber_ServerValidate"
></asp:CustomValidator>
<br />
홀수만 입력:
<asp:TextBox ID="txtOddNumber" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="홀수만 입력하시오."
ControlToValidate="txtOddNumber"
ClientValidationFunction="FuncValidationOddNumber"
></asp:CustomValidator>
<hr />
<asp:Button ID="btnSubmit" runat="server" Text="확인" />
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 TextBox ID txtEvenNumber CustomValidator ID valEvenNumber ControlToValidate txtEvenNumber ErrorMessage 짝수만 입력하시오. TextBox ID txtOddNumber CustomValidator ID valOddNumber ControlToValidate txtOddNumber ErrorMessage 홀수만 입력하시오. Button ID btnOK Text 확인
④ FrmCustomValidator.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
using System.Web.UI.WebControls;
namespace DevValidationControl
{
public partial class FrmCustomValidator : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void valEvenNumber_ServerValidate(
object source, ServerValidateEventArgs args)
{
if (Convert.ToInt32(args.Value) % 2 == 0)
{
args.IsValid = true; // 유효성 검사 통과
}
else
{
args.IsValid = false; // 에러 메시지 출력
}
}
}
}
⑤ FrmCustomValidator.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 정확한 데이터를 입력한 후 <확인> 버튼을 클릭하면 유효성 검사를 통과합니다. 그림 8 9 FrmCustomValidator.aspx 페이지 실행 결과
8.15.3 마무리 사용자 정의 유효성 검사 컨트롤은 크게 두 가지 스타일로 제공됩니다. 하나는 JavaScript를 사용한 유효성 검사이고, 다른 하나는 코드 비하인드 페이지에서 C# 코드를 사용하여 수행하는 유효성 검사다.
8.16 ValidationSummary 컨트롤 지금까지 사용한 컨트롤의 에러 메시지는 모두 해당 컨트롤이 있는 자리에서 출력되었습니다. 하지만 유효성 검사 요약 컨트롤을 사용하면 해당 에러 메시지를 손쉽게 한 곳에 모아서 출력하거나, 경고 대화 상자(window.alert())를 통해서 출력할 수 있습니다.
8.17 [실습] ValidationSummary 컨트롤로 에러 메시지 요약하기 8.17.1 소개 각각의 유효성 검사 컨트롤에서 출력하던 에러 메시지를 한 곳에 모아서 출력하거나, 웹 브라우저 경고 대화 상자를 통해서 출력하는 기능을 살펴보겠습니다.
8.17.2 따라하기 ① DevValidationControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevValidationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmValidationSummary.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmValidationSummary.aspx
③ FrmValidationSummary.aspx 페이지를 열고 다음과 같이 입력합니다.
코드: FrmValidationSummary.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmValidationSummary.aspx.cs"
Inherits="DevValidationControl.FrmValidationSummary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>유효성 검사 요약 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>유효성 검사 요약 컨트롤</h3>
아이디:
<asp:TextBox ID="txtUserId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valUserId" runat="server"
ControlToValidate="txtUserId" Display="None"
ErrorMessage="아이디를 입력하시오."></asp:RequiredFieldValidator>
<br />
암호:
<asp:TextBox ID="txtPassword" runat="server"
TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="valPassword" runat="server"
ControlToValidate="txtPassword" Display="None"
ErrorMessage="암호를 입력하시오."></asp:RequiredFieldValidator>
<hr />
<asp:LinkButton ID="btnLogin" runat="server">로그인</asp:LinkButton>
<br />
<asp:ValidationSummary ID="valSummary" runat="server"
ShowMessageBox="true"
ShowSummary="true"
DisplayMode="BulletList"
/>
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 ValidationSummary ID valSumary ShowMessageBox True ShowSummary True DisplayMode BulletList
④ FrmValidationSummary.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
⑤ FrmValidationSummary.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 요약 컨트롤은 인라인 또는 메시지박스 중 원하는 방식으로 출력할 수 있습니다. 그림처럼 둘 다 출력하는 것도 가능합니다. 그림 8 10 FrmValidationSummary.aspx 페이지 실행 결과
8.17.3 마무리 지금까지 살펴본 유효성 검사 컨트롤은 웹 응용 프로그램을 작성할 때 반복되는 기능들을 손쉽게 구현하도록 도와주어 개발자의 생산성을 높여줍니다.
8.18 유효성 검사 활용 예제 8.18.1 InitialValue 속성으로 기본값을 제외한 다른 값 선택하기 (1) 웹 폼 페이지를 하나 생성한 후 다음과 같이 코드를 작성합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmDropDownListWithRequiredFieldValidator.aspx.cs"
Inherits="DevValidationControl.FrmDropDownListWithRequiredFieldValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>InitialValue로 기본값 선택 체크하기</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="선택"
OnClick="Button1_Click" />
<hr />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="DropDownList1" ErrorMessage="선택하시오"
InitialValue="-1"
Display="None"></asp:RequiredFieldValidator>
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ShowMessageBox="true" ShowSummary="false" />
</div>
</form>
</body>
</html>
(2) 코드 비하인드 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DevValidationControl
{
public partial class FrmDropDownListWithRequiredFieldValidator : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DropDownList1.Items.Insert(0, new ListItem("-선택-", "-1"));
for (int i = 0; i < 10; i++)
{
// [1] Text와 Value를 DB에서 구분해서 읽어와서...
ListItem li =
new ListItem(i.ToString(), String.Format("{0}", i));
// [2] DropDownList 컨트롤에 등록
this.DropDownList1.Items.Add(li);
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedValue;
}
}
}
(3) 페이지 실행 후 선택 버튼을 클릭하면 기본값 선택 시에는 다음과 같은 메시지가 출력되고 정확한 값을 입력했을 때는 나머지 코드가 정상적으로 진행됩니다. 그림 8 11 InitialValue 속성으로 기본값 지정하기
8.18.2 이용약관 동의 체크 확인하기 (1) 웹 폼을 하나 만들고 다음과 같이 소스 코드를 입력합니다. 이 페이지는 따로 코드 비하인드 파일을 사용하지 않습니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmCheckBoxRequiredValidationWithCustomValidator.aspx.cs"
Inherits="DevValidationControl.FrmCheckBoxRequiredValidationWithCustomValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>이용약관 동의 체크 확인하기</title>
<script>
// ASP.NET CustomValidator 컨트롤을 사용하여 체크박스 확인
function ValidationConfirmCheckBox(sender, args) {
if (document.getElementById("<%= chkConfirm.ClientID %>").checked == true) {
args.IsValid = true;
}
else {
args.IsValid = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="form-group">
<label for="optGender" class="col-sm-2 control-label">
<asp:Literal ID="Literal1" runat="server">이용 약관</asp:Literal>:
</label>
<div class="col-sm-10">
<p>회원 이용 약관에 동의하셔야 회원가입을 하실 수 있습니다.</p>
<asp:TextBox ID="txtAgreement" runat="server" TextMode="MultiLine"
Height="80px" Width="100%" Style="font-size: 9pt;"></asp:TextBox>
<div class="checkbox">
<label>
<asp:CheckBox ID="chkConfirm" runat="server" Checked="false"></asp:CheckBox>
<asp:Literal ID="strAcceptTheLicense" runat="server">
위 약관에 동의합니다.(Accept the license)</asp:Literal>
</label>
</div>
<asp:CustomValidator ID="valConfirm" runat="server"
ErrorMessage="약관에 동의하셔야 합니다."
ClientValidationFunction="ValidationConfirmCheckBox"></asp:CustomValidator>
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ShowSummary="false" ShowMessageBox="true" />
<div>
<asp:Button ID="Button1" runat="server" Text="가입" />
</div>
</div>
</div>
</form>
</body>
</html>
(2) 웹 브라우저로 실행 후 테스트해보면 아래 그림과 같이 체크박스를 체크해야지만 유효성 검사를 통과합니다. 그림 8 12 이용약관 동의
8.18.3 체크박스에 값이 하나라도 체크되어있는지 확인 (1) 다음과 같이 ASPX 파일을 생성 후 다음과 같이 소스를 입력합니다. 코드 비하인드 파일은 사용하지 않습니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmCheckBoxListValidation.aspx.cs"
Inherits="DevValidationControl.FrmCheckBoxListValidation" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>체크박스에 값이 하나라도 체크되어있는지 확인</title>
<script type="text/javascript">
// 체크박스에 값이 하나라도 체크되어있는지 확인
function CheckValue(sender, args) {
var chkControlId = 'chkFavorites';
var options =
document.getElementById(chkControlId).getElementsByTagName('input');
var ischecked = false;
args.IsValid = false;
for (i = 0; i < options.length; i++) {
var opt = options[i];
if (opt.type == "checkbox") {
if (opt.checked) {
ischecked = true;
args.IsValid = true;
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="chkFavorites" runat="server" ValidationGroup="MyForm">
<asp:ListItem Value="0">ASP.NET</asp:ListItem>
<asp:ListItem Value="1">Bootstrap</asp:ListItem>
<asp:ListItem Value="2">C#</asp:ListItem>
<asp:ListItem Value="3">Dapper</asp:ListItem>
</asp:CheckBoxList>
<asp:CustomValidator ID="ValidateCheckBoxList1" runat="server"
ErrorMessage="반드시 하나 이상을 체크하세요."
ClientValidationFunction="CheckValue" ValidationGroup="MyForm" Display="None" />
<asp:ValidationSummary runat="server" DisplayMode="List" ShowSummary="false"
ShowMessageBox="true" ValidationGroup="MyForm" />
<asp:Button Text="전송" runat="server" ValidationGroup="MyForm" />
</div>
</form>
</body>
</html>
(2) 웹 페이지 실행 후 하나라도 체크가 되지 않으면 경고창이 뜨면서 다음으로 진행되지 않습니다. 그림 8 13 체크박스에 하나라도 체크되었는지 확인