Flex 2 개발 가이드 > Flex 데이터 기능 > 데이터 검증 데이터 검증

데이터 검증

유저가 유저 인터페이스에 입력하는 데이터는, 어플리케이션에 있어 적절한 내용의 경우도 있으면, 그렇지 않은 것도 있습니다. Flex 에서는, 오브젝트의 필드치가 특정의 조건에 적합하는 것을 프로텍션하기 위해서 "발리 데이터 " 를 사용합니다. 예를 들어, 유저가 유효한 전화번호치를 입력한 것을 확인하거나 string치가 설정된 최소치 이상인 것이나, 우편 번호 필드에 올바른 자리수의 숫자가 포함되어 있는 것을 확인하거나 하기 위해서, validator 를 사용할 수 있습니다.

전형적인 클라이언트서버 환경에서는, 데이터가 클라이언트로부터 서버에 송신된 후에, 서버상에서 데이터 검증이 실행됩니다. Flex validator 를 사용하는 메리트의 1 개는, validator 를 클라이언트상에서 실행해, 서버에 송신되기 전에 입력 데이터를 검증할 수 있는 점입니다. Flex validator 를 사용하는 것으로, 데이터를 서버에 송신해, 다음에 서버로부터 에러 메세지를 수신할 필요가 없어지기 (위해)때문에, 어플리케이션 전체의 응답성이 향상합니다.

Flex 에는, 우편 번호, 전화번호, 크레디트 카드 번호등의 공통되는 타입의 유저 입력 데이터용으로 일련의 validator 가 준비되어 있습니다. Flex 에는 다음의 validator 가 있습니다.

• CreditCardValidator 클래스의 사용
• CurrencyValidator 클래스의 사용
• DateValidator 클래스의 사용
• EmailValidator 클래스의 사용
• NumberValidator 클래스의 사용
• PhoneNumberValidator 클래스의 사용
• RegExpValidator 클래스의 사용
• SocialSecurityValidator 클래스의 사용
• StringValidator 클래스의 사용
• ZipCodeValidator 클래스의 사용

validator 에 대해

발리 데이터는 MXML 또는 ActionScript 를 사용해 정의합니다. MXML 내에서 validator 를 선언하려면 ,<mx:Validator> 태그인가, 적절한 validator 타입의 태그를 사용합니다. 예를 들어, 다음의 예와 같이, 표준 validator PhoneNumberValidator 를 선언하는 경우는,<mx:PhoneNumberValidator> 태그를 사용합니다.

<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <! -- PhoneNumberValidator 를 정의합니다.  -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{phoneInput}" property="text"/>

    <! -- 전화번호를 입력하는 TextInput 컨트롤을 정의합니다.  -->
    <mx:TextInput id="phoneInput"/>
    <mx:TextInput id="zipCodeInput"/>

</mx:Application> 

전의 예에서는, 전화번호용의 TextInput 컨트롤에 값을 입력합니다. 우편 번호용의 TextInput 컨트롤을 선택해, 직전의 TextInput 컨트롤로부터 포커스를 이동하면, validator 가 실행됩니다.

발리 데이터의 source properties 에 의해 오브젝트를 지정해,property properties 에 의해 검증하는 오브젝트의 필드를 지정합니다. source 및 property properties 의 상세한 것에 대하여는,source properties 와 property properties 에 대해를 참조해 주세요.

Validator 태그는, MXML 파일의 루트 태그 직하의 아이로서의 보고 지정할 수 있습니다. 전의 예에서는, validator 에 의해, 유저가 TextInput 컨트롤에 유효한 전화번호를 입력한 것을 확인합니다. 유효한 전화번호에는, 적어도 10 자리수의 번호와 추가의 서식 캐릭터가 포함됩니다. 상세한 것에 대하여는,PhoneNumberValidator 클래스의 사용을 참조해 주세요.

다음의 예와 같이, validator 는 MXML 파일내의 스크립트 블록 또는 ActionScript 파일내의 어느쪽이든으로, ActionScript 를 사용해 선언합니다.

    <mx:Script>
        <! [CDATA[
            // PhoneNumberValidator 를 읽어들입니다.
            import mx.validators.PhoneNumberValidator;

            // validator 를 작성합니다.
            private var v:PhoneNumberValidator = new PhoneNumberValidator();

            private function createValidator() :void             {
                // validator 를 설정합니다.  
                v.source = phoneInput;
                v.property = "text";
            }
        ]]>
    </mx:Script> 

    <! -- 전화번호를 입력하는 TextInput 컨트롤을 정의합니다.  -->
    <mx:TextInput id="phoneInput" creationComplete="createValidator() ;"/>
    <mx:TextInput id="zipCodeInput"/>

source properties 와 property properties 에 대해

발리 데이터는, 다음의 2 개의 properties 를 사용해 검증하는 아이템을 지정합니다.

source  검증하는 properties 를 포함한 오브젝트를 지정합니다. 이 properties 에는, 컴퍼넌트 또는 데이터 모델의 인스턴스를 설정합니다. source properties 에 값을 지정하려면 , MXML 내에서 데이터 바인딩 문장구조법을 사용합니다.

property  검증하는 값을 포함한 source 의 properties 명을 지정하는 string입니다. 네스트 된 properties 를 지정하기 위해서, 닷 단락의 string가 지원(support)되고 있습니다.

이러한 properties 는, 다음의 몇개의 방법으로 설정할 수 있습니다.

• 발리 데이터 태그를 사용할 때는 MXML 내에서 설정한다.
• ActionScript 내에서 properties 에 값을 할당하는 것으로 설정한다.
• 프로그램을 사용해 validator 를 호출하기 위해서(때문에) Validator.validate() 메소드를 호출해 설정한다. 상세한 것에 대하여는,프로그램에 의한 검증의 trigger 를 참조해 주세요.

통상은, 다음의 예와 같이,source properties 의 값으로 해서 Flex 유저 인터페이스 컨트롤을 지정해,property properties 의 값으로 해서 검증하는 컨트롤의 properties 를 지정합니다.

<mx:ZipCodeValidator id="zipV" source="{myZip}" property="text"/>
<mx:TextInput id="myZip"/> 

이 예에서는, Flex 의 ZipCodeValidator 를 사용해,TextInput 컨트롤에 입력된 데이터를 검증합니다. TextInput 컨트롤은,text properties 에 입력 데이터를 포함합니다.

검증의 trigger 에 대해

검증은, 이벤트에 응답해 자동적으로 trigger 되도록(듯이) 하는지, validator 의 Validator.validate() 메소드를 명시적으로 호출해 프로그램으로부터 trigger 합니다.

이벤트를 사용하는 경우는, 유저 액션에 응답해 자동적으로 validator 를 실행하도록(듯이) 설정할 수 있습니다. 예를 들어,Button 컨트롤의 click 이벤트를 사용해 폼의 필드상에서 검증을 trigger 할 수 있습니다. 또,TextInput 컨트롤의 valueCommit 이벤트를 사용해 유저가 정보를 컨트롤에 입력한 후에 검증을 trigger 할 수도 있습니다. 게다가 데이터 바인딩식의 일부로서 검증의 실행시에 이벤트를 사용할 수 있습니다. 상세한 것에 대하여는,이벤트를 사용한 검증의 trigger 를 참조해 주세요.

이벤트를 사용해, 모든 검증을 trigger 할 수 있다고는 할 수 없습니다. 예를 들어, 1 개의 검증을 실행하기 위해서, 복수의 관련하는 입력 필드를 조사하지 않으면 안 되는 경우가 있습니다. 또, 유저의 입력에 근거해 조건부로 검증을 실행해야 하는 경우도 있습니다. 예를 들어, 미 달러나 유로 등, 지불해 사용하는 통화를 유저가 선택할 수 있도록(듯이) 할 수가 있습니다. 그 때문에(위해)는, 특정의 통화로 설정된 validator 를 호출할 필요가 있습니다. 이 경우, 입력치에 적절한 validator 를 trigger 하는 validate() 메소드를 명시적으로 호출하도록(듯이) 지정할 수 있습니다. 상세한 것에 대하여는,프로그램에 의한 검증의 trigger 를 참조해 주세요.

필수 필드의 검증에 대해

Flex validator 는, 유저가 유저 인터페이스 컨트롤에 부정한 값을 입력했을 때에 그것을 판별할 수 있습니다. 모든 validator 가 required properties 를 지원(support)하고 있습니다. 이 properties 가 true 의 경우, 유저 인터페이스 컨트롤로 값의 결핍이나 empty의 값이 있으면, 검증 에러가 발생합니다. 디폴트치는 true 입니다. 따라서, validator 에 관련지을 수 있었던 콘토르에 유저가 1 개에서도 필수 데이터를 입력할 수 없었던 경우는, 디폴트로 검증 에러가 발생합니다. 이 체크를 무효로 하려면 ,required properties 를 false 로 설정합니다. 상세한 것에 대하여는,필수 필드의 검증을 참조해 주세요.

검증 에러에 대해

디폴트에서는, 검증 에러가 발생하면, 장해에 관련하는 컴퍼넌트의 주위에 붉은 박스가 묘화 됩니다. 마우스 포인터를 그 컴퍼넌트 우에에 겹치면, 에러에 관련지을 수 있었던 에러 메세지가 표시됩니다. 컴퍼넌트의 외관과 에러에 관련지을 수 있는 에러 메세지는, 커스터마이즈 가능합니다. 검증 에러의 상세한 것에 대하여는,검증 에러의 조작을 참조해 주세요.

검증 이벤트에 대해

검증은 event-driven입니다. 이벤트를 사용해, 검증의 trigger , 이벤트에 응답한 프로그라마틱인 validator 의 작성과 설정, validator 에 의해 송출(Dispatch)된 이벤트의 수취를 실행할 수 있습니다.

예를 들어, 검증 조작이 완료하면, validator 는 검증 결과에 응해 valid 이벤트 또는 invalid 이벤트를 송출(Dispatch)합니다. 이러한 이벤트를 받아, 그 후, 어플리케이션에 필요한 추가의 처리를 실행할 수 있습니다.

다른 방법으로서 Flex 컴퍼넌트가 검증 결과에 응해 valid 이벤트 또는 invalid 이벤트를 송출(Dispatch)하는 일도 있습니다. 이 경우는, validator 에 의해 송출(Dispatch)된 이벤트는 아니고, 검증 대상의 컴퍼넌트로부터 송출(Dispatch)된 이벤트를 받게 됩니다.

검증 이벤트를 받을 필요는 없습니다. 디폴트에서는, 검증이 실패했을 경우, 데이터 바인딩의 소스에 관련지을 수 있었던 컨트롤의 주위에 붉은 박스가 묘화 됩니다. 검증에 합격하면, 이전 실패했을 때의 인디케이터(indicator)는 클리어 됩니다. 상세한 것에 대하여는,검증 이벤트의 조작을 참조해 주세요.

custom 검증에 대해

Flex 는, 다수의 사전 정의 끝난 validator 를 제공하고 있습니다만, 독자적인 검증 논리를 구현할 필요가 생기는 경우도 있습니다. ActionScript 의 mx.validators.Validator 클래스를 상속 받는 것으로, custom 검증 논리를 캡슐화한 서브 클래스를 작성할 수 있습니다. custom validator 의 작성의 상세한 것에 대하여는, 「Flex 2 컴퍼넌트의 작성과 확장」의커스텀 validator 의 작성을 참조해 주세요.