JavaScript 정리 10

18 Feb 2019

Reading time ~4 minutes

JavaScript 정리 10 - select태그 option 생성, 회원가입 유효성 검증

select태그 option 생성

이전 회원가입 구현 할 때 직접 하드코딩했었음
- JS를 사용하면 쉽게 option을 생성 가능

option 태그의 구조

<option value="백엔드에 넘겨줄 값">보여줄 값

JavaScript에서 옵션 생성하기

// 1. 아이디나 이름으로 select태그를 얻기
var sel = document.getElementById("id");

// 2. select의 옵션 개수를 설정(초기화)
sel.length = 남겨둘 옵션의 수;

// 3. 옵션 생성하기
sel.options[인덱스] = new Option("보여줄 값", "넘겨줄 value 값");

기존 HTML 옵션을 모두 삭제하고 JS로 생성

<tr>
      <td>생년월일</td>
      <td>
            <select name="b_year" class="inputBox">
            </select>
            <label>년</label>                         
            
            <select name="b_month" class="inputBox">
            </select>
            <label>월</label>
            
            <select name="b_day" class="inputBox">
            </select>                     
            <label>일</label>                         
      </td>
</tr>

window.onload = function() {
     var obj = document.joinFrm;
     // 옵션 생성
     var b_year = obj.b_year; // 1. select 얻기
     var date = new Date();
     var year_idx = 0;

     // 현재 20살인 사람의 출생년도를 selected 처리
     var flag_year = date.getFullYear()-20+1;

     for(var i=1950; i < date.getFullYear()+1; i++) {
          // 2. select의 옵션 생성
          b_year.options[year_idx] = new Option(i+"년", i);
          
          if(flag_year == i) {
               b_year.selectedIndex = year_idx;
               // .value는 값 할당할 때 사용
          }

          year_idx++;
     }
}

위처럼 월,일도 설정

window.onload = function() {
     var obj = document.joinFrm;
     // 옵션 생성
     ...
     
     // 월 설정
     var b_month = obj.b_month;
     var month_idx = 0;
     for (var i=1; i<13; i++) {
          b_month.options[month_idx] = new Option(i+"월", i);
          month_idx++;
     }
     
     // 일 설정, 무조건 1~31로 설정
     var b_day = obj.b_day;
     var day_idx = 0;
     for (var i=1; i<32; i++) {
          b_day.options[day_idx] = new Option(i+"일", i);
          day_idx++;
     }
}

회원가입 유효성 검증

회원가입 시 필수 입력 항목들을 지정
- 아이디, 비밀번호, 비밀번호 확인, 이름, 주민번호, 우편번호, 주소, 상세주소
아이디
- 중복확인 버튼 클릭 시 popup창이 뜸
  - 아이디를 입력 후 사용 버튼 클릭 시 부모창으로 값 전송 후 창을 닫음
비밀번호
- 비밀번호에서 커서가 빠져나가면 비밀번호와 비밀번호 확인에 값이 같은지 비교
  - 같다면 커서를 “이름”에 이동시킴
  - 같지 않다면 경고창에 “비밀번호를 확인해주세요”를 보여주고 초기화 시킨 후 커서를 비밀번호로 이동
주민번호
- 앞 숫자 6개가 입력되면 커서를 주민번호 뒷자리로 이동
- 뒤에 숫자 7개가 입력되고 커서가 빠져나가면 주미번호의 유효성을 검증
  - 유효하면 성별, 생년월일, 나이를 계산하여 채워준다
  - 유효하지 않다면 “경고창”을 보여주고 주민번호 입력값을 초기화하고 주민번호 앞자리로 커서를 이동
우편번호
- 우편번호 검색버튼을 누르면 popup창이 뜸
- 동이름 을 입력받아 우편번호, 주소를 조회
  - daum에서 제공하는 우편번호를 사용
  - 주소나 우편번호가 클릭되면 값을 부모창으로 전달하고 자식창을 닫고 커서를 상세주소로 옮김
초기화
- HTML Form Control의 값을 초기화
가입
- 필수 입력사항을 체크하고 없다면 해당 경고창을 보여준다.
- 모드 입력되면 join.jsp에 값을 전달한다.

팝업창 처리

중복확인 ,우편번호검색을 누르면 팝업창 띄움
- 이벤트 등록
- 중복확인 자식 팝업창에서 부모창으로 값 넘기는건 이전 시간에 정리했음

document.getElementById("idDup").addEventListener("click",  popupCenter);
document.getElementById("searchZip").addEventListener("click",  popupCenter);

function popupCenter() {
     var width=0;
     var height=0;
     var html="";
     var id="";
     
     
     if (this.id == "idDup") {
          id="idDup";
          html="id_dup.html";             
          width=532;
          height=333;
     }

     if (this.id == "searchZip") {
          id="searchZip";
          html="search_zip.html";
          width=502;
          height=450;
     }

     window.open(html, id, "width="+width+",  height="+height);
}

부모창으로 값 넘기는건 우편번호검색도 동일하게 구현

function sendZip(zipcode, addr) {
     var parentObj = opener.window.document.joinFrm;

     var arrZip = new Array();
     arrZip = zipcode.split("-");

     parentObj.zipcode1.value = arrZip[0];
     parentObj.zipcode2.value = arrZip[1];

     // 또는
     // parentObj.zipcode1.value = zipcode.split("-")[0];
     // parentObj.zipcode1.value = zipcode.split("-")[1];

     parentObj.addr1.value = addr;

     self.close();
}

DAUM 주소 API 사용

DAUM 주소 API
- API script태그를 head태그에 놓는 이유
  - script를 body에 넣었을 때 에러가 발생하면 사용자는 에러메시지를 이후 서비스를 볼 수 없다.
  - script를 head에 넣었다면 에러가 발생하더라도 body는 에러메시지 없이 그대로 제공된다.

다음우편번호검색에 API에서 제공하는 execPostCode함수를 클릭이벤트와 연결

document.getElementById("daumZip").addEventListener("click",  execPostCode);

<script  src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
    //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라,  내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을  설명합니다.
    function execPostCode() {
        new daum.Postcode({
          oncomplete: function(data) {
               // 팝업에서 검색결과 항목을 클릭했을때 실행할  코드를 작성하는 부분.
               // 도로명 주소의 노출 규칙에 따라 주소를  표시한다.
               // 내려오는 변수가 값이 없는 경우엔  공백('')값을 가지므로, 이를 참고하여 분기 한다.
               var roadAddr = data.roadAddress; // 도로명 주소  변수
               var extraRoadAddr = ''; // 참고 항목 변수
               // 법정동명이 있을 경우 추가한다. (법정리는  제외)
               // 법정동의 경우 마지막 문자가 "동/로/가"로  끝난다.
               if(data.bname !== '' &&  /[동|로|가]$/g.test(data.bname)){
               extraRoadAddr += data.bname;
               }
               // 건물명이 있고, 공동주택일 경우 추가한다.
               if(data.buildingName !== '' && data.apartment  === 'Y'){
               extraRoadAddr += (extraRoadAddr !== '' ? ', '  + data.buildingName : data.buildingName);
               }
               // 표시할 참고항목이 있을 경우, 괄호까지  추가한 최종 문자열을 만든다.
               if(extraRoadAddr !== ''){
               extraRoadAddr = ' (' + extraRoadAddr + ')';
               }
               // 우편번호와 주소 정보를 해당 필드에 넣는다.
               document.getElementById('zipcode').value =  data.zonecode;
               document.getElementById("roadAddr").value =  roadAddr;
               
               // 참고항목 문자열이 있을 경우 해당 필드에  넣는다.
               if(roadAddr !== ''){
               document.getElementById("extraAddr").value =  extraRoadAddr;
               } else {
               document.getElementById("extraAddr").value =  '';
               }
          }
     }).open();
    }
</script>

비밀번호 검증

비밀번호 확인에서 커서가 나가면 두 비밀번호를 비교
blur이벤트를 사용
- 커서가 나갔을 때 이벤트가 호출됨
pass2 input text태그를 blur이벤트와 연결

document.getElementById("pass2").addEventListener("blur",  checkPass);

function checkPass() { // 비밀번호가 일치하는지 체크하는 함수
     var obj = document.joinFrm;
     if(obj.pass1.value != obj.pass2.value) {
               alert('비밀번호가 틀립니다.');
               obj.pass1.value = "";
               obj.pass2.value = "";
               obj.pass1.focus();
               return;
     }
}

JavaScript