[Flex] 주민등록번호 Validator

회원가입 같은 페이지를 만들다보면 입력받을 값들이 상당히 많습니다.
이러한 값들이 실제 유효한 값인지 아닌지 판별하기가 좀 짜증나는 면이 있죠. 예전에 PHP로 회원가입 폼을 만들다보면 유효성 체크를 하기 위해서 JavaScript 로 각 필드의 값들을 체크하곤 했었습니다. (JavaScript 의 도움 없이 하려면 이 값들을 서버로 넘겨서(회원가입처리하는 php페이지) 서버에서 검증을 한 뒤에 하나라도 문제가 있으면 다시 그 화면을 표시해야되는 상당히 짜증나는 문제가 발생합니다. 그래서 클라이언트에서 해당 값들의 유효성을 체크하기 위해 JavaScript 를 이용했죠.)

물론 Flex에서도 비슷하게 해당 값(TextInput의 text 값)을 <mx:Script/> 안에서 체크하면 됩니다만, 코드를 매번 만들어야(복사해야)되니 짜증도 나고요.. ㅎ 상당히 귀찮은 면이 있었습니다. 그러나 다행이도 Flex 에서는 Validator 라는 것을 지원합니다.

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

출처 : flexdocs.kr

이 Validator 는 아래와 같이 하위 Validator가 존재합니다. : 

• CreditCardValidator : 신용카드 번호 검증
• CurrencyValidator : 화폐단위 검증
• DateValidator : 날짜형식 검증
• EmailValidator : 전자우편 주소 검증
• NumberValidator :  유효한 수치인지 검증
• PhoneNumberValidator : 전화번호 형식 검증
• RegExpValidator : 정규표현식을 이용한 검증
• SocialSecurityValidator : 미국의 사회보장번호 검증
• StringValidator : String의 길이에 대한 검증
• ZipCodeValidator : 미국이나 캐나다의 ZIP 코드 검증

총 10개의 하위 Validator 가 존재하는데, Flex를 한국에서 만들지는 않아서 주민등록번호 Validator 는 존재하지 않습니다. ;) 없으면 어떻게 할까요? 그냥 체크안할 수도 없고 말이죠. 뭐 별수 있습니까? 그래서 만들었습니다!. 요즘은 회원가입시에 주민등록번호를 받지 않는 곳이 늘고 있습니다만, custom Validator를 어떻게 만들어야되는지 알아보기 위해, 흔히 만들어 보셨을 주민등록번호 Validator를 만들어 보았습니다. 주민등록번호의 유효성 체크 부분은 Flex Component 카페의 마요네즈라는 분이 올려주신 주민등록번호 체크 function이라는 글의 코드를 가져다가 썼습니다. (주민등록번호가 영어로는 RRN 이라더군요. RRNValidatort 라고 하면 어려울 것 같아 JuminBunhoValidator 이라고 이름지었습니다. (웃음) )

 package warkyman { import mx.validators.ValidationResult; import mx.validators.Validator; public class JuminBunhoValidator extends Validator { public function JuminBunhoValidator() { super(); } /** * 입력값은 "811201-1234567" 이나 , "8112011234567" */ override protected function doValidation(value:Object):Array { var results:Array = super.doValidation(value); // 입력필수 설정하였을 경우에는 (required="true") 값을 안넣으면 에러 if(results.length != 0) { return results; } var strRRN:String; var keyNum:Array = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5]; var sum:int = 0; strRRN = (value.toString()).replace(new RegExp("-", "g"), ""); // 입력받은 주민번호가 - 기호를 제외한 13자리인지 확인 if(strRRN.length != 13) { results.push(new ValidationResult(true, null, "Error", "13자리가 아닙니다.")); return results; } else { for(var i:int=0; i<12; i++) { sum += parseInt(strRRN.substr(i, 1)) * keyNum[i]; // 0~12번째 자리의 값을 각각 키값으로 곱하여 모두 합산한다. } var strRRNCheckNum:int = parseInt(strRRN.substr(12, 1)); // 주민번호의 13번째 숫자 var caculateCheckNum:int = (11-(sum%11))%10; // 실제 계산한 숫자 // 주민번호 13번째 숫자가 실제 계산값과 맞는지 확인 if(strRRNCheckNum != caculateCheckNum) { results.push(new ValidationResult(true, null, "Error", "잘못된 주민등록번호입니다.")); return results; } } return results; } } }

위의 주민등록번호 Validator를 이용하여 예제를 만들어보았습니다. 예제코드는  Flex  Reference에 Validator의 예제를 빌려왔습니다. ;)
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:c="warkyman.*" width="437" height="275" fontSize="12"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.ValidationResultEvent; // validator에서 나오는 이벤트 핸들러 private function handleValid(eventObj:ValidationResultEvent):void { if(eventObj.type==ValidationResultEvent.VALID) // 주민번호가 형식에 맞으면 확인버튼 활성화 submitButton.enabled = true; else submitButton.enabled = false; } private function submitForm():void { Alert.show("완료!"); } ]]> </mx:Script> <c:JuminBunhoValidator id="juminValid" required="true" source="{jumin}" property="text" valid="handleValid(event)" invalid="handleValid(event)"/> <mx:Panel title="주민등록번호 Validator 예제" width="100%" height="100%" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"> <mx:Form width="349" fontSize="12"> <mx:Text width="100%" color="blue" text="주민등록번호를 넣고 등록버튼을 눌러보세요. - 실제로 저장되지는 않습니다 ;)"/> <mx:FormItem label="주민등록번호 :" required="true"> <mx:TextInput id="jumin" width="119"/> </mx:FormItem> <mx:FormItem> <mx:Button id="submitButton" enabled="false" label="등록" click="submitForm();"/> </mx:FormItem> </mx:Form> </mx:Panel> </mx:Application>

한번 자신의 주민등록번호를 넣고 테스트해보세요. (저장되지 않으니 안심하시고... )