Vue에서 javascript로 주민등록번호 뒷자리를 입력하는 예제입니다.
두개의 input을 사용했고, inputmode와 pattern의 경우 모바일 환경에서
키패드가 좀 더 자연스럽게 노출되도록 설정하기 위해서 아래 예시와 같이 사용했습니다.
실제 사용자가 입력하는 input 박스에서는 맨 앞자리를 제외한 나머지는 • 으로 나타나게 되고
아래 Result에서 노출되는 부분에서 실제 유저가 입력한 데이터를 노출해주고 있습니다.
간단한게 원리를 설명하면
유저가 입력한 정보를 저장하는 변수(firstRRN, secondRRN)와
노출하는 변수(firstRNNView, secondRNNView)를 각각 별개로 두고 관리합니다.
유저가 정보를 입력하는 주민등록번호 앞자리와 뒷자리는 배열을 통해서 입력을 받습니다.
입력받은 값이 올바른 숫자값인 경우 노출하는 값에 데이터를 전달합니다.
주민등록번호 뒷자리인 경우 이러한 과정에서 첫번째 숫자를 제외한 나머지를
특수문자로 치환하고 노출하게 됩니다.
+
주민등록번호가 유효한지는 validateRRN 함수에서 처리를 하게 됩니다.
아래 예시에서 true인 경우 주민등록번호 규칙에 의해서 유효한 주민등록번호 입니다.
(주민등록번호 검증 규칙은 생략)
댓글