본문 바로가기
CODE/CodeKnowledge

[국비과제] 자바스크립트 이용 회원가입 형식 만들기

by 솔리닉__ 2023. 7. 12.
반응형

아마 국비지원 교육 들으시는 분들중에 서치하실 거 같아서 공개로 돌립니다 ㅎㅎ 

<html>

<head>
	<meta charset="utf-8">
    <script type="text/javascript" src="ec.js"></script>
	<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
  
<title>회원 가입 페이지</title>
</head>
  
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#FFFFFF" align="center">

<form onsubmit="return validate()">
<body>

<tr>
<th colspan="2" align="center" bgcolor="#A9BCF5" >회원 기본 정보</th>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="center"><b>아이디:</b></td>
<td> <input type="text" id="id" >
  4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>

<tr>
<td bgcolor="#EAEAEA" align="center"> <b>비밀번호:</b></td>
<td><input type="password" id="pw" name="pw">
  4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
 
<tr>
<td bgcolor="#EAEAEA" align="center"> <b>비밀번호확인:</b></td>
<td><input type="password" id= "pw_ch" name="pw_ch"></td>
</tr>
  
  <tr>
<td bgcolor="#EAEAEA" align="center"> <b>메일주소:</b></td>
<td> <input type="text" name="mail" id="mail"> 예)cja@gmail.com</td>
</tr>
  
 <tr>
<td bgcolor="#EAEAEA" align="center"> <b>이름:</b>
<td><input type="text" id = "name" name="name"></td>
</tr>

  
  
 <tr>
<th colspan="2" align="center" bgcolor="#A9BCF5" >개인 신상 정보</th>
</tr>

<tr>
	<td class="index" bgcolor="#EAEAEA" align="center" ><b>주소</b></td>
	<td>
	  <input type="text" id="sample4_postcode" placeholder="우편번호">
	  <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
	  <input type="text" id="sample4_roadAddress" placeholder="도로명주소">
	  <input type="text" id="sample4_jibunAddress" placeholder="지번주소">
	  <span id="guide" style="color:#999;display:none"></span>
	  <br>
	  <input type="text" id="sample4_detailAddress" placeholder="상세주소">
	  <input type="text" id="sample4_extraAddress" placeholder="참고항목">
	</td>
  </tr>

  <tr>
	<td colspan="2" align="center">
		<input type="text" id="sample5_address" placeholder="주소">
	<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
	<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
  <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=db8a355dc9e1713703a21fdfcbe6e050&libraries=services"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5 // 지도의 확대 레벨
        };

    //지도를 미리 생성
    var map = new daum.maps.Map(mapContainer, mapOption);
    //주소-좌표 변환 객체를 생성
    var geocoder = new daum.maps.services.Geocoder();
    //마커를 미리 생성
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map
    });


    function sample5_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                var addr = data.address; // 최종 주소 변수

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_address").value = addr;
                // 주소로 상세 정보를 검색
                geocoder.addressSearch(data.address, function(results, status) {
                   
 // 정상적으로 검색이 완료됐으면
                    if (status === daum.maps.services.Status.OK) {

                        var result = results[0]; //첫번째 결과의 값을 활용

                        // 해당 주소에 대한 좌표를 받아서
                        var coords = new daum.maps.LatLng(result.y, result.x);
                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                    }
                });
            }
        }).open();
    }
</script>
    	</td>
    </tr>
  
<tr>
<td bgcolor="#EAEAEA" align="center"> <b>주민등록번호:</b> </td>
<td> <input type="password" name="pn1" id="pn1" size="10"> - <input type="password" name="pn2" id = "pn2" size="10"> 예)1234512347</td>
</tr>
  
  <tr>
<td bgcolor="#EAEAEA" align="center"> <b>생일:</b>
<td> 
  <input type="text" name="year" id="year" size="1"> 년 
  <select name="month" id="month">
                    <option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
  월</select> 
  
  
  
  <select name="day" id="day" size="1">
                	<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
                    <option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
                    <option value="31">31</option>
                </select>일
</tr>
  
  <tr>
 <td bgcolor="#EAEAEA" align="center"> <b>관심분야:</b>
<td>
  <input type="checkbox" name="op" value="computer"> 컴퓨터
  <input type="checkbox" name="op" value="internet">인터넷
  <input type="checkbox" name="op" value="trip">여행 
  <input type="checkbox" name="op" value="movie">영화감상 
  <input type="checkbox" name="op" value="music">음악감상</td>
</tr>
  
   <tr>
           <td bgcolor="#EAEAEA" align="center"> <b>자기소개:</b>
            <td><textarea name="my_info" cols="50" rows="5" id="self"></textarea></td>
        </tr>
  
   <tr><td colspan="2" align="center" bgcolor="#FFFFFF">
            	<input type="submit" value="회원 가입"></a>
                <input type="reset" value="다시입력">
            	</td>
        </tr>
  


  
  </table>


  </form>
  
  
  </body>
  </html>

function validate(){
    var test1 = /^[a-zA-Z0-9]{4,12}$/; // 아이디와 비번을 검사할 유효성검사식
    var test2 = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; // 이메일이 적합한지 검사할 유효성검사식
   // var nameExp = /^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/; // 이름 유효성 검사
    var test3= /^[0-9]{5,5}$/;

    var id = document.getElementById("id");
    var pw = document.getElementById("pw");
    var pw_ch=document.getElementById("pw_ch")
    var mail = document.getElementById("mail");
    var pn1 = document.getElementById("pn1"); //주민번호1
    var pn2 = document.getElementById("pn2");//주민번호2
    var name = document.getElementById("name");
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var day = document.getElementById("day");
    var postcode = document.getElementById("postcode");
    var op = document.getElementsByName("op");
    var self = document.getElementById("self");
    cnt =0;

    var arrNum1 = new Array();
    var arrNum2 = new Array();

    if(!test1.test(id.value)) {
        alert("오류났다이놈아");
        return false;
    }
    if(!test1.test(pw.value)) {
        alert("비밀번호 형식을 지켜주세요.");
        return false;
    }

    if(pw.value!=pw_ch.value) {
        alert("비밀번호 값이 다릅니다. 확인해주세요.");
        return false;
    }

    if(mail.value =="") {
        alert("이메일을 입력해주세요");
        return false;
    }

    if(!test2.test(mail.value)){
        alert("이메일 형식을 지켜주세요");
        return false;
    }

    if(name.value ==""){
        alert("이름을 입력해주세요")
        return false;
    }

    



    //주민등록번호

    for(var i=0; i<pn1.value.length; i++){
        arrNum1[i] = pn1.value.charAt(i);
    }

    for(var i=0; i<pn2.value.length; i++){
        arrNum2[i] = pn2.value.charAt(i);
    }

    var pnSum = 0;


    //주민번호 앞자리 유효검사
    for(var i=0; i<pn1.value.length; i++){
        pnSum += arrNum1[i] * (i+2);
    }

    //주민번호 뒷자리 유효검사 

    for(var i=0; i<pn2.value.length-1; i++){
        if(i>=2){
            pnSum += arrNum2[i] * i;
        }
        else {
            pnSum +=arrNum2[i] *(8+i);
        }
    }

   if((11-(pnSum%11))%11 != arrNum2[6]) {
       alert("주민등록번호를 확인하세요.")
   } 

   //주민등록번호를 생년월일에 바로 넣기

   if(arrNum2[0]==1 || arrNum2[0]==2) {
       console.log("왜그래?");
       var yy = parseInt(pn1.value.substring(0,2));
       var mm = parseInt(pn1.value.substring(2,4));
       var dd = parseInt(pn1.value.substring(4,6));

       year.value = 1900 + yy;
       month.value = mm;
       day.value = dd; 


   }
   else if(arrNum2[0]==3 || arrNum2[0]==4){

    var yy = parseInt(pn1.value.substring(0,2));
    var mm = parseInt(pn1.value.substring(2,4));
    var dd = parseInt(pn1.value.substring(4,6));

    year.value = 2000 + yy;
    month.value = mm;
    day.value = dd; 


   }

   for( var i =0; i<op.length; i++){
       if(op[i].checked) {
           cnt++;
       }
   }
   console.log(cnt);

   if(cnt==0) {
       alert("관심분야 하나를 선택하세요.");
       return false;
   }

   if (self.value == "") {
       console.log("귀찮게해");
    alert("자기소개를 적어주세요");
    self.focus();
    return false;
 }
    else if(10>self.value.length) {
        console.log("에");
    alert("10글자 이상 입력하세요.");
    self.focus();
    return false;
    } 

   else if(self.value.length>200){
    console.log("ㅇㅇ");
    alert("글자수를 초과하셨습니다.");
    self.focus();
    return false;
   }
   
  
}

function sample4_execDaumPostcode() {
  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('sample4_postcode').value = data.zonecode;
      document.getElementById("sample4_roadAddress").value = roadAddr;
      document.getElementById("sample4_jibunAddress").value = data.jibunAddress;

      // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
      if (roadAddr !== '') {
        document.getElementById("sample4_extraAddress").value = extraRoadAddr;
      } else {
        document.getElementById("sample4_extraAddress").value = '';
      }

      var guideTextBox = document.getElementById("guide");
      // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
      if (data.autoRoadAddress) {
        var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
        guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
        guideTextBox.style.display = 'block';

      } else if (data.autoJibunAddress) {
        var expJibunAddr = data.autoJibunAddress;
        guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
        guideTextBox.style.display = 'block';
      } else {
        guideTextBox.innerHTML = '';
        guideTextBox.style.display = 'none';
      }
    }
  }).open();
}

비정규식은 수정해서 올리기 

반응형

'CODE > CodeKnowledge' 카테고리의 다른 글

[TIP] jar안에 class파일 미리보는 법 (매우 간단함)  (0) 2023.07.15
[SQL] selfjoin 셀프조인에 대해 알아보기 (쓰임, 정의, 방법)  (0) 2023.07.13
[스프링] 관리자 페이지 만들기 1  (0) 2023.07.11
파이어베이스와 스프링부트를 이용하여 웹사이트 만들기 ②  (0) 2023.07.09
파이어베이스와 스프링부트를 이용하여 웹사이트 만들기 ①  (0) 2023.07.08

관련글

댓글

티스토리툴바