Spry 유효성 검사 텍스트 필드 위젯 작업

검색

마지막 업데이트 날짜 2022년 11월 28일

참고:

Spry 위젯은 Dreamweaver CC 이상에서 jQuery 위젯으로 바뀌었습니다. 페이지의 기존 Spry 위젯을 수정할 수는 있지만 새 Spry 위젯을 추가할 수는 없습니다.

유효성 검사 텍스트 필드 위젯 정보

Spry 유효성 검사 텍스트 필드 위젯은 사이트 방문자가 텍스트를 입력하면 그 텍스트가 유효한지 여부를 표시하는 텍스트 필드입니다. 예를 들어 방문자가 이메일 주소를 입력하는 양식에 유효성 검사 텍스트 필드 위젯을 추가할 수 있습니다. 방문자가 이메일 주소에 "@" 기호와 마침표를 입력하지 않으면 사용자의 입력 정보가 유효하지 않음을 알리는 메시지가 위젯에 표시됩니다.

다음은 여러 가지 상태의 유효성 검사 텍스트 필드 위젯을 보여 주는 예입니다.

A. 텍스트 필드 위젯, 활성화된 힌트 B. 텍스트 필드 위젯, 유효한 상태 C. 텍스트 필드 위젯, 유효하지 않은 상태 D. 텍스트 필드 위젯, 필수 상태

유효성 검사 텍스트 필드 위젯에는 유효함, 잘못됨, 값 필요 등의 여러 가지 상태가 포함됩니다. 속성 관리자를 사용하여 원하는 유효성 검사 결과에 따라 이러한 상태의 속성을 변경할 수 있습니다. 유효성 검사 텍스트 필드 위젯을 사용하면 방문자가 위젯 바깥쪽을 클릭할 때, 텍스트를 입력할 때, 양식을 전송하려 할 때 등의 다양한 시점에서 유효성을 검사할 수 있습니다.

초기 상태

브라우저에 페이지가 로드될 때 또는 사용자가 양식을 새로 고칠 때의 위젯 상태입니다.

포커스 상태

사용자가 위젯에 삽입 포인터를 놓을 때의 위젯 상태입니다.

유효한 상태

사용자가 정보를 올바르게 입력했고 양식을 전송할 수 있는 경우의 위젯 상태입니다.

잘못된 상태

사용자가 텍스트를 잘못된 서식으로 입력했을 때의 위젯 상태입니다. 연도를 2006 대신 06으로 입력한 경우 등을 예로 들 수 있습니다.

필수 상태

텍스트 필드에 필요한 텍스트를 사용자가 입력하지 않았을 때의 위젯 상태입니다.

최소 문자 수 상태

사용자가 입력한 문자 수가 텍스트 필드에 필요한 최소 문자 수보다 적은 경우의 위젯 상태입니다.

최대 문자 수 상태

사용자가 입력한 문자 수가 텍스트 필드에 허용되는 최대 문자 수보다 많은 경우의 위젯 상태입니다.

최소 값 상태

사용자가 입력한 값이 텍스트 필드에 필요한 값보다 작은 경우의 위젯 상태입니다. 이 상태는 정수, 실수 및 데이터 유형 유효성 검사에 적용됩니다.

최대 값 상태

사용자가 입력한 값이 텍스트 필드에 허용되는 최대 값보다 큰 경우의 위젯 상태입니다. 이 상태는 정수, 실수 및 데이터 유형 유효성 검사에 적용됩니다.

사용자와 상호 작용을 통해 유효성 검사 텍스트 필드 위젯이 이러한 상태 중 하나로 전환될 때마다 런타임에 Spry 프레임워크 논리를 통해 특정 CSS 클래스가 위젯의 HTML 컨테이너에 적용됩니다. 예를 들어 사용자가 필수 텍스트 필드에 텍스트를 입력하지 않은 채로 양식을 전송하려고 하면 "값을 반드시 입력해야 합니다."라는 오류 메시지가 위젯에 표시되도록 하는 클래스가 Spry를 통해 위젯에 적용됩니다. 오류 메시지의 스타일과 표시 상태를 제어하는 규칙은 이 위젯과 관련된 CSS 파일인 SpryValidationTextField.css에 있습니다.

일반적으로 form 태그 안에 포함되는 유효성 검사 텍스트 필드 위젯의 기본 HTML은 컨테이너 <span> 태그 및 이 태그로 둘러싸인 텍스트 필드의 <input> 태그로 구성됩니다. 문서의 헤드 내부와 위젯의 HTML 마크업 아래에 있는 script 태그도 유효성 검사 텍스트 필드 위젯의 HTML에 포함됩니다.

유효성 검사 텍스트 필드 위젯의 코드에 대한 자세한 분석을 비롯하여 유효성 검사 텍스트 필드 위젯이 작동하는 방식에 대한 포괄적인 설명은 www.adobe.com/go/learn_dw_sprytextfield_kr을 참조하십시오.

유효성 검사 텍스트 필드 위젯 삽입 및 편집

유효성 검사 텍스트 필드 위젯 삽입

[삽입] > [Spry] > [Spry 유효성 검사 텍스트 필드]를 선택합니다.
[입력 태그 액세스 가능성] 대화 상자에서 원하는 옵션을 설정하고 [확인]을 클릭합니다.

참고:

[삽입] 패널에서 [Spry] 범주를 사용하여 유효성 검사 텍스트 필드 위젯을 삽입할 수도 있습니다.

유효성 검사 유형 및 서식 지정

유효성 검사 텍스트 필드 위젯에 대해 각기 다른 유효성 검사 유형을 지정할 수 있습니다. 예를 들어 텍스트 필드에 신용 카드 번호가 입력되는 경우 신용 카드 유효성 검사 유형을 지정할 수 있습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])의 [유형] 메뉴에서 유효성 검사 유형을 선택합니다.
[서식] 팝업 메뉴가 활성화되는 경우에는 이 메뉴에서 서식을 선택합니다.

대부분의 유효성 검사 유형이 적용된 텍스트 필드에는 표준 서식이 지정됩니다. 예를 들어 텍스트 필드에 정수 유효성 검사 유형을 적용하면 사용자가 이 텍스트 필드에 숫자를 입력하지 않는 한 위젯에서 유효성 검사를 수행하지 않습니다. 그러나 일부 유효성 검사 유형에서는 텍스트 필드에 지정되는 서식을 선택할 수 있습니다. 다음 표에는 속성 관리자를 통해 지정할 수 있는 유효성 검사 유형과 서식의 목록이 나와 있습니다.

유효성 검사 유형	서식
없음	특별한 서식이 필요하지 않습니다.
정수	텍스트 필드에 숫자만 입력할 수 있습니다.
이메일 주소	텍스트 필드에 @ 기호와 마침표(.)가 포함된 이메일 주소를 입력할 수 있습니다. @ 기호와 마침표 앞뒤에는 각각 적어도 하나 이상의 문자가 와야 합니다.
날짜	서식이 다양합니다. 속성 관리자의 [서식] 팝업 메뉴에서 원하는 서식을 선택합니다.
시간	서식이 다양합니다. 속성 관리자의 [서식] 팝업 메뉴에서 원하는 서식을 선택합니다. "tt"는 am/pm 서식을 나타내고, "t"는 a/p 서식을 나타냅니다.
신용 카드	서식이 다양합니다. 속성 관리자의 [서식] 팝업 메뉴에서 원하는 서식을 선택합니다. 모든 신용 카드를 허용하거나 특정 종류의 신용 카드(MasterCard, Visa 등)를 지정할 수 있습니다. 텍스트 필드에 입력하는 신용 카드 번호에는 4321 3456 4567 4567의 경우와 같이 공백을 사용할 수 없습니다.
우편 번호	서식이 다양합니다. 속성 관리자의 [서식] 팝업 메뉴에서 원하는 서식을 선택합니다.
전화 번호	미국 및 캐나다의 (000) 000-0000 서식이나 사용자 정의 서식으로 텍스트 필드에 전화 번호를 입력할 수 있습니다. 사용자 정의 서식을 사용하기로 선택한 경우 000.00(00) 등의 서식을 [패턴] 텍스트 상자에 입력합니다.
주민등록번호	텍스트 필드에 000-00-0000 서식의 주민등록번호를 입력할 수 있습니다. 다른 서식을 사용하려면 유효성 검사 유형으로 [사용자 정의]를 선택하고 패턴을 지정합니다. 패턴 유효성 검사 메커니즘에는 ASCII 문자만 사용할 수 있습니다.
통화	텍스트 필드에 1,000,000.00 또는 1.000.000,00 같은 서식으로 통화를 입력할 수 있습니다.
실수/과학 표기법	정수(예: 1), 부동 소수점 값(예: 12.123), 과학 표기법으로 나타낸 부동 소수점 값(예: 1.212e+12, 1.221e-12, 여기서 e는 10의 거듭제곱) 같은 다양한 종류의 숫자를 유효성 검사할 수 있습니다.
IP 주소	서식이 다양합니다. 속성 관리자의 [서식] 팝업 메뉴에서 원하는 서식을 선택합니다.
URL	텍스트 필드에 http://xxx.xxx.xxx 또는 ftp://xxx.xxx.xxx 같은 서식의 URL을 입력할 수 있습니다.
사용자 정의	사용자 정의 유효성 검사 유형 및 서식을 지정할 수 있습니다. 속성 관리자에서 서식 패턴을 입력하고 필요한 경우 힌트도 입력합니다. 패턴 유효성 검사 메커니즘에는 ASCII 문자만 사용할 수 있습니다.

유효성 검사 실시 시간 지정

사이트 방문자가 위젯 바깥쪽을 클릭할 때, 텍스트를 입력할 때 또는 양식을 전송하려 할 때 등의 다양한 시점에서 유효성 검사를 실시하도록 설정할 수 있습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])에서 유효성 검사를 실시할 시간을 나타내는 옵션을 선택합니다. 모든 옵션을 선택하거나 [onSubmit]만 선택할 수 있습니다.

흐림 효과

사용자가 텍스트 필드 바깥쪽을 클릭할 때마다 유효성 검사를 합니다.

바꾸기

사용자가 텍스트 필드의 텍스트를 변경할 때 유효성 검사를 합니다.

onSubmit

사용자가 양식을 전송하려 할 때 유효성 검사를 합니다. [onSubmit] 옵션은 기본적으로 선택되어 있으며 선택 취소할 수 없습니다.

최소 및 최대 문자 수 지정

이 옵션은 없음, 정수, 이메일 주소 및 URL 유효성 검사 유형에만 사용할 수 있습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])의 [최소 문자] 또는 [최대 문자] 상자에 숫자를 입력합니다. 예를 들어 [최소 문자] 상자에 3을 입력하면 사용자가 3개 이상의 문자를 입력해야만 위젯에서 유효성을 검사합니다.

최소값 및 최대값 지정

이 옵션은 정수, 시간, 통화 및 실수/과학 표기법 유효성 검사 유형에만 사용할 수 있습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])의 [최소 값] 또는 [최대 값] 상자에 숫자를 입력합니다. 예를 들어 [최소 값] 상자에 3을 입력하면 사용자가 텍스트 필드에 숫자 3 또는 3보다 큰 값(4, 5, 6 등)을 입력해야만 위젯에서 유효성을 검사합니다.

디자인 뷰에 위젯 상태 표시

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])의 [상태 미리 보기] 팝업 메뉴에서 표시하려는 상태를 선택합니다. 예를 들어 유효한 상태의 위젯을 표시하려면 [유효함]을 선택합니다.

텍스트 필드의 필수 상태 변경

Dreamweaver를 통해 삽입하여 웹 페이지에 게시한 모든 유효성 검사 텍스트 필드 위젯은 기본적으로 사용자로부터 데이터를 입력받아야 합니다. 그러나 원하는 경우 텍스트 필드 입력을 선택 사항으로 만들 수도 있습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])에서 필요에 따라 [필수] 옵션을 선택하거나 선택 취소합니다.

텍스트 필드의 힌트 만들기

텍스트 필드의 서식이 매우 다양하므로 어떤 서식의 데이터를 입력해야 하는지에 대한 힌트를 사용자에게 제시하는 것이 좋습니다. 예를 들어 전화 번호 유효성 검사 유형이 설정된 텍스트 필드에는 (000) 000-0000 서식의 전화 번호만 입력할 수 있습니다. 이러한 샘플 번호를 힌트로 입력하면 브라우저에 페이지를 로드하는 사용자에게 텍스트 필드의 올바른 서식을 표시할 수 있습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])의 [힌트] 텍스트 상자에 힌트를 입력합니다.

잘못된 문자 차단

사용자가 유효성 검사 텍스트 필드 위젯에 잘못된 문자를 입력하지 못하도록 할 수 있습니다. 예를 들어 정수 유효성 검사 유형이 설정된 위젯에 대해 이 옵션을 선택하면 사용자가 문자를 입력하려는 경우 텍스트 필드에 아무 것도 표시되지 않습니다.

문서 창에서 유효성 검사 텍스트 필드 위젯을 선택합니다.
속성 관리자([윈도우] > [속성])에서 [패턴 적용] 옵션을 선택합니다.

유효성 검사 텍스트 필드 위젯 사용자 정의

속성 관리자를 사용하면 유효성 검사 텍스트 필드 위젯을 간단히 편집할 수 있지만 사용자 정의된 스타일 지정 작업은 이 관리자에서 지원하지 않습니다. 유효성 검사 텍스트 필드 위젯의 CSS를 변경하여 원하는 대로 스타일 지정된 위젯을 만들 수 있습니다. 더 구체적인 스타일 지정 작업의 목록은 www.adobe.com/go/learn_dw_sprytextfield_custom_kr을 참조하십시오.

다음 항목의 모든 CSS 규칙은 SpryValidationTextField.css 파일에 있는 기본 규칙을 가리킵니다. Spry 유효성 검사 텍스트 필드 위젯을 만들 때마다 Dreamweaver를 통해 SpryValidationTextField.css 파일이 해당 사이트의 SpryAssets 폴더에 저장됩니다. 이 파일의 주석에는 위젯에 적용되는 다양한 스타일에 대한 정보가 포함되어 있으므로 필요한 정보를 찾는 데 유용하게 참조할 수 있습니다.

참고:

관련 CSS 파일에서 직접 유효성 검사 텍스트 필드 위젯의 규칙을 간단히 편집할 수 있지만 [CSS 스타일] 패널을 사용하여 이 위젯의 CSS를 편집할 수도 있습니다. [CSS 스타일] 패널을 사용하면 위젯의 각 부분에 할당된 CSS 클래스를 쉽게 찾을 수 있습니다. 이는 패널의 [현재] 모드를 사용하는 경우에 특히 유용합니다.

유효성 검사 텍스트 필드 위젯 오류 메시지 텍스트 스타일 지정

기본적으로 유효성 검사 텍스트 필드 위젯의 오류 메시지는 빨간색으로 표시되고 텍스트 주위에는 1픽셀 테두리가 함께 표시됩니다.

유효성 검사 텍스트 필드 위젯 오류 메시지의 텍스트 스타일을 변경하려면 다음 표를 사용하여 해당 CSS 규칙을 찾은 다음 기본 속성을 변경하거나 원하는 텍스트 스타일 속성과 값을 추가합니다.

변경할 텍스트	관련 CSS 규칙	변경할 관련 속성
오류 메시지 텍스트	.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg	color: #CC3333; border: 1px solid #CC3333;

유효성 검사 텍스트 필드 위젯 배경색 변경

유효성 검사 텍스트 필드 위젯의 상태별 배경색을 변경하려면 다음 표를 사용하여 해당 CSS 규칙을 찾은 다음 기본 배경색 값을 변경합니다.

변경할 색상	관련 CSS 규칙	변경할 관련 속성
유효한 상태의 위젯 배경색	.textfieldValidState input, input.textfieldValidState	background-color: #B8F5B1;
잘못된 상태의 위젯 배경색	input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input	background-color: #FF9F9F;
포커스가 주어진 위젯 배경색	.textfieldFocusState input, input.textfieldFocusState	background-color: #FFFFCC;

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?