본문 바로가기
개발일지/Front

부트스트랩 이용해서 회원가입 페이지 수정

연습용365 2021. 11. 21. 03:34

 

 

@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); 
* { font-family: 'NanumGothic', '나눔고딕', Dotum; }

- 나눔글꼴 적용

 

부트스트랩의 경우 이미 css가 적용되어 있기 때문에 <link>를 통해서 css 파일을 입히고, 글꼴을 따로 설정해주어야한다. 링크로 부트스트랩을 갖고 오는 게 아니라 파일을 받아서 거는 경우 그 안에서 css 파일을 수정하면 됨!! 

 

 

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <title>회원가입</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="../js/jquery-1.12.4.min.js"></script>
  <script>
    var hobbyCheck = false;

    function checkMember()
    {
        var getIntro = $("#intro").val().replace(/\s|/gi,'');
        var hobbyCheck = false;
        var getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
        var getCheck= RegExp(/^[a-zA-Z0-9]{4,12}$/);
        var getName= RegExp(/^[가-힣]+$/);
        var fmt = RegExp(/^\d{6}[1234]\d{6}$/); //형식 설정
        var buf = new Array(13); //주민등록번호 배열
        
        //아이디
        var tt = $.trim($("#tbID").val());   //공백제거
        if(tt == "")
        {
            alert("아이디를 입력 하세요.");
            $("#tbID").focus();
            return false;
        }
        
        if(!getCheck.test(tt))
        {
            alert("아이디를 정규표현식에 맞춰 입력 하세요.");
            $("#tbID").val("");
            $("#tbID").focus();
            return false;
        }     
        
        //비밀번호
        if($.trim($("#tbPwd").val()) == "")
        {
            alert("비밀번호를 입력 하세요.");
            $("#tbPwd").focus();
            return false;
        }
        
        if(!getCheck.test($.trim($("#tbPwd").val())))
        {
            alert("정규표현식에 맞춰 입력 하세요.");
            $("#tbPwd").val("");
            $("#tbPwd").focus();
            return false;
        }
        
        if($("#tbPwd").val() != $("#tbPwd2").val())
        {
            alert("비밀번호가 잘못 입력 되었습니다.");
            $("#tbPwd").val("");
            $("#tbPwd2").val("");
            $("#tbPwd").focus();
            return false;
        }
        
        //이메일
        if($.trim($("#mail").val()) == "")
        {
            alert("이메일을 입력하세요.");
            $("#mail").focus();
            return false;
        }
        
        if(!getMail.test($.trim($("#mail").val())))
        {
            alert("이메일 표현식이 잘못되었습니다. 다시 입력하세요.");
            $("#mail").val("");
            $("#mail").focus();
            return false;
        }
        
        //이름
        if($.trim($("#name").val()) == "")
        {
            alert("이름을 입력하세요.");
            $("#name").focus();
            return false;
        }
        
        if(!getName.test($.trim($("#name").val())))
        {
            alert("이름의 표현식을 확인하세요.");
            $("#name").val("");
            $("#name").focus();
            return false;
        }
        
        //주민번호
        if($.trim($("#pnum").val()).length != 6)
        {
            alert("주민번호 앞자리를 입력 하세요.");
            $("#pnum").val("");
            $("#pnum").focus();
            return false;
        }
        
        if($.trim($("#nnum").val()).length != 7)
        {
            alert("주민번호 앞자리를 입력 하세요.");
            $("#nnum").val("");
            $("#nnum").focus();
            return false;
        }
        
        if(check_jumin() == false)
        {
            return false;
        }
        
        //관심분야
        for(var i = 0; i < $('[name="hobby"]').length; i++)
        {
            if($('input:checkbox[name="hobby"]').eq(i).is(":checked") == true)
            {
              hobbyCheck = true;
              break;
            }
        }
        
        if(!hobbyCheck)
        {
            alert("관심분야는 하나이상 체크하셔야 합니다.");
            return false;
        }
        
      return true;
    }

    //주민번호 확인 함수
    function check_jumin() 
    {
      var jumins3 = $("#pnum").val() + $("#nnum").val();

      //주민등록번호 생년월일 전달
      var fmt = RegExp(/^\d{6}[1234]\d{6}$/);  //포멧 설정
      var buf = new Array(13);
      //주민번호 유효성 검사
      if (!fmt.test(jumins3)) 
      {
          alert("주민등록번호 형식에 맞게 입력해주세요");
          $("#pnum").focus();

          return false;
      }

      //주민번호 존재 검사
      for (var i = 0; i < buf.length; i++)
      {
          buf[i] = parseInt(jumins3.charAt(i));
      }

      var multipliers = [2,3,4,5,6,7,8,9,2,3,4,5];// 밑에 더해주는 12자리 숫자들 
      var sum = 0;

      for (var i = 0; i < 12; i++)
      {
            sum += (buf[i] *= multipliers[i]);// 배열끼리12번 돌면서 
      }

      if ((11 - (sum % 11)) % 10 != buf[12]) 
      {
            alert("잘못된 주민등록번호 입니다.");
            $("#pnum").focus();

            return false;
      }

    }

    $(function(){
      $("#nnum").on("focusout", function(event){
          if($("#pnum").val().length == 6 && $("#nnum").val().length == 7)
          {
            var jumin = $("#pnum").val() + $("#nnum").val();
            var birthYear = (jumin.charAt(6) <= 2) ? "19" : "20";
            birthYear += $("#pnum").val().substr(0,2);
            var birthMonth = $("#pnum").val().substr(2,2);
            var birthDay = $("#pnum").val().substr(4,2);
            
            $("#year").val(birthYear);
            $("#month").val(birthMonth);
            $("#day").val(birthDay);
          }
      });
    });
  </script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="join.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->

<h2 align="center" style="font-weight: bold;">회원가입</h2>

<form name="form1" action="join1.html" method="post" onSubmit="return checkMember();">
<table class="table" align="center">
  <thead class="thead-dark">
    <tr><th colspan="5">회원 기본 정보</th></tr>
  </thead>
  <tr>
    <td>아이디</td>
    <td colspan="4"><input type="text" name="tbID" id="tbID"> <em>4~12자리의 영문 대소문자와 숫자로만 입력</em> </td>
  </tr>
  <tr>
    <td>비밀번호</td>
    <td colspan="4"><input type="password" maxlength=12 name="tbPwd" id="tbPwd"> <em>4~12자리의 영문 대소문자와 숫자로만 입력</em></td>
  </tr>
  <tr>
    <td>비밀번호확인</td>
    <td colspan="4"><input type="password" maxlength=12 name="tbPwd2" id="tbPwd2"></td>
 </tr> 
 <tr>
    <td>메일주소</td>
    <td colspan="4"><input type="text" name="mail" id="mail"><em> 예)id@domain.com</em></td>
 </tr>
 <tr>
    <td>이름</td>
    <td colspan="4"><input type="text" name="name" id="name"></td>
 </tr>  
 <thead class="thead-light">
 <tr>
    <th colspan="5">개인신상정보</th>
  </tr>
</thead>
 <tr>
    <td>주민등록번호</td>
    <td colspan="4"><input type="text" name="pnum" id="pnum" size="8" maxlength=6> -
       <input type="password" name="nnum" id="nnum" size="8" maxlength=7>
    </td>
 </tr>   
 <tr>
    <td>생일</td>
    <td colspan="4"><input type="text" name="year" id="year" style="width:70px" readonly disabled> 년
       <input type="text" name="month" id="month" style="width:70px" readonly disabled> 월
       <input type="text" name="day" id="day" style="width:70px" readonly disabled> 일
    </td>
 </tr>    
 <tr>
    <td>관심분야</td>
    <td colspan="4">
       <input type="checkbox" name="hobby" value="1">컴퓨터 &nbsp
       <input type="checkbox" name="hobby" value="2">인터넷 &nbsp
       <input type="checkbox" name="hobby" value="3">여행 &nbsp
       <input type="checkbox" name="hobby" value="4">영화감상 &nbsp
       <input type="checkbox" name="hobby" value="5">음악감상 &nbsp
    </td>
 </tr> 
 <tr>
    <td width="100" height="100">자기소개</td>
    <td colspan="4">
       <textarea name="intro" id="intro" cols="50" rows="5"></textarea>
    </td>
 </tr>
</table>
<p align="center">
  <button type="submit" class="btn btn-dark">회원가입</button>
  <button type="reset" class="btn btn-light">다시입력</button>
</p>
</form>
</body>
</html>

 

'개발일지 > Front' 카테고리의 다른 글

[Bootstrap] input type text 가로 배치 문제  (0) 2022.04.16
[ 부트스트랩 ] 그리드 크기에 따라 숨기기/보이기  (0) 2022.04.10
input, list 예제(복습)  (1) 2021.11.03
1101(3) html - input, select 복습  (0) 2021.11.02
1101(2) html - 테이블(table)  (0) 2021.11.01

'개발일지/Front' Related Articles

티스토리툴바