DreamwaverMX 및 ASP.NET(5)

데이터를 입력하기 위한 입력 상자를 설정합니다. ASP.NET에는 데이터를 허용하는 텍스트 상자 컨트롤이 있습니다. 구문은 다음과 같습니다.

< asp:textbox id=”…” runat=”server” 기타 특성/ >

DreamweaverMX에서는 다음을 클릭할 수 있습니다. 텍스트 상자 컨트롤을 추가하는 바로가기 버튼입니다. 팝업 대화 상자에서 ID, 텍스트 모드(대화 상자 유형), 도구 설명(컨트롤 위에 마우스를 올렸을 때 나타나는 메시지), 레이아웃(스타일 디자인), 스타일 정보(입력을 설정하는 데 사용)를 설정합니다. 텍스트 형식 및 텍스트 상자 테두리 형식)을 사용하여 컨트롤을 설정합니다. 아래 그림은 텍스트 상자의 설정 대화 상자입니다.


[그림 5-3 텍스트박스 설정 대화상자 1]

[그림 5-4 텍스트박스 설정 대화상자 2]


[그림 5-5 텍스트박스 설정 대화상자 3]

COMMENT 데이터 항목은 많은 양의 텍스트를 입력해야 하므로 여러 입력 라인이 있는 텍스트 상자를 사용해야 합니다. 텍스트 모드를 MultiLine으로 설정하고 원하는 행 수(Rows)를 입력하면 됩니다.

추가된 이벤트를 생성하기 위해서는 버튼도 필요합니다. 양식 탭을 클릭하고 "버튼" 버튼을 클릭하여 추가하세요.

STEP2 데이터 검증 활용

이름, 성, 전화번호, 이메일을 반드시 입력해야 하므로, 사용자가 입력하는 것을 잊어버리지 않도록 필수FieldValidator 컨트롤을 추가하여 컨트롤을 검증할 수 있습니다. 컨트롤은 유효성 검사 오류가 발생할 경우 해당 위치에서 확인에 실패한 콘텐츠를 표시하므로 데이터 유효성 검사 컨트롤을 적절한 위치에 배치해야 합니다.

필수FieldValidator 데이터 유효성 검사를 위한 제어 구문은 다음과 같습니다.

< asp:RequiredFieldValidato 기타 특성 runat="server" >오류 메시지</ asp:RequiredFieldValidator >

또는

< asp:RequiredFieldValidator ErrorMessage="오류 메시지" 기타 특성 runat="server"/ >

추가 태그를 클릭한 후 ASP.NET 태그의 유효성 검사 서버를 선택하면 선택할 수 있는 다양한 유형의 데이터 유효성 검사 컨트롤이 있음을 확인할 수 있습니다. First_name 입력 상자 뒤에 유효성 검사 컨트롤 asp:RequiredFieldValidator를 추가해야 합니다.

RequiredfieldValidator 컨트롤 설정 창에서 유효성을 검사할 컨트롤은 이 데이터 유효성 검사 컨트롤과 연결된 입력 컨트롤의 ID이고 오류 메시지는 데이터 유효성 검사가 실패할 때 표시되는 메시지입니다. 동시에 레이아웃과 스타일 정보를 설정하여 필요한 스타일을 선택할 수 있습니다.


[그림 5-6 검증 컨트롤 선택]


[그림 5-7 필수fieldValidator 컨트롤 설정 대화상자]

동시에 Last_Name 입력 상자 뒤에 동일한 방법을 사용하여 또 다른 필수FieldValidato 데이터 유효성 검사 컨트롤을 추가합니다. 이제 페이지를 저장하고 미리 볼 수 있습니다. First_name, Last_name 입력란에 데이터를 입력하지 않은 상태에서 Submit 버튼을 클릭하면 인증 실패 메시지가 나타납니다. 그림 5-8과 같습니다.

하지만 유효한 데이터를 확인해야 하는 경우가 많습니다. 예를 들어 우편번호는 6자리여야 하고, 입력한 이메일 주소는 특정 형식이어야 합니다. 여기서는 RegularExpressionValidator를 사용하여 데이터의 유효성을 확인해야 합니다. 이 등록 페이지에서는 전화와 이메일 모두 확인을 위해 이 컨트롤을 사용할 수 있습니다.


[그림 5-8 필수필드검사기 대화상자]

[그림 5-9 이메일 설정 속성]

필수필드 유효성 검사 컨트롤을 추가하는 방법과 유사하게 "추가 태그.."를 클릭하여 데이터 유효성 검사 컨트롤을 추가하도록 선택합니다. 차이점은 유효성 검사 표현식을 설정하는 것입니다. 휴대폰에서는 7~10자리를 입력해야 하므로 다음과 같이 설정해야 합니다.

[0-9]{7,10}

구문은 다음과 같습니다.

[]: 허용되는 문자를 정의하는 데 사용됩니다. 예를 들어, az는 소문자 'a'-'z'가 허용되는 문자임을 의미하고, a-zA-Z는 모든 문자가 허용된다는 의미이며, 0-9는 모든 문자가 허용된다는 의미입니다. 숫자.

{}: 입력해야 하는 문자 수를 정의하는 데 사용됩니다. {7,10}은 7~10자를 입력할 수 있음을 의미하고, {0,}는 0자까지 무제한으로 허용된다는 의미입니다.

'.': 임의의 문자를 입력함을 나타냅니다. .{0,}은 0부터 무한대까지 모든 문자가 허용된다는 의미입니다.

|: OR(또는)을 나타냅니다. 예를 들어 [A-Za-z]{3}|[0-9]{3}는 영문자 3개 또는 숫자 3개를 사용할 수 있음을 의미합니다.

(): 쉽게 읽을 수 있도록 | 기호가 포함된 문자열은 일반적으로 ()로 묶입니다. 예를 들면 ([A-Za-z]{3}|[0-9]{3})입니다.

: [], {}, (), | 등과 같은 특수 기호가 포함된 경우 해당 문자열 앞에 를 추가해야 합니다.

다음은 보다 일반적으로 사용되는 몇 가지 예입니다.

이메일: .{1,}@.{1,}/..{1}

전화번호(지역번호 포함): ([0-9]{3,4}))[0-9]{7,8}

사용자 입력이 실제 데이터라는 보장은 없지만 유효성 검사 컨트롤을 통해 형식이 올바른지 확인할 수 있습니다.


[그림 5-10 미리보기 페이지]

CompareValidator 컨트롤의 경우 해당 속성은 다음과 같이 설정됩니다.