본문 바로가기
교육/Javascript&Jquery

자바스크립트 + 제이쿼리 입문 day 11

by Renechoi 2023. 1. 16.

회원가입시 form 구현하기 

 

 

form 1 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- form.html -->

    <article>
      <h2>약관동의</h2>
      <form action="./form2.html" id="m_step1">
        <div>
          <p><input type="checkbox" id="term1" />약관동의</p>
          <p><input type="checkbox" id="term2" />개인정보수집동의</p>
          <p><input type="checkbox" id="all" />전체동의</p>
          <p><input type="submit" value="저장" /></p>
        </div>
      </form>
    </article>

    <script>
      window.addEventListener("submit", function (e) {
        e.preventDefault();

        if (!term1.checked) {
          alert("약관동의를 체크해주세요!");
          return;
        }

        if (!term2.checked) {
          alert("개인정보수집동의를 체크해주세요!");
          return;
        }

        m_step1.submit();
      });

      all.addEventListener("click", () => {
        term1.checked = all.checked;
        term2.checked = all.checked;
      });
    </script>

    <article>
      <h2>스위치버튼</h2>
      <div>
        <input type="checkbox" id="test" />
        <label for="test"></label>
      </div>
      <style>
        label {
          display: block;
          width: 60px;
          height: 26px;
          background-color: #ddd;
          border-radius: 26px;
        }
        input:checked + label {
            background-color: rgb(12,111,12);
        }
        #test{display:none};
      </style>
    </article>
  </body>
</html>

 

 

 

form 2 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<article>
    <h2>
        정규식을 활용한 유효성 검사 
    </h2>
    <form id="member">
        <div>
            <p>
                <input type="text" placeholder="아이디" id="id"></p>
                <input type="text" placeholder="이메일" id="email"></p>
                <input type="text" placeholder="연락처" id="tel"></p>
                
                <p><input type ="submit" value ="저장"></p>
            </p>
        </div>
    </form>
</article>

<script>
    const regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
    window.addEventListener('submit', (e)=> {
        e.preventDefault();
      if (!regEmail.test(email.value) ) {
        alert('이메일 형식이 잘못되었습니다');
        email.value='';
        email.focus();
      }

      member.action = './form.html';
      member.submit();
    })


</script>

</body>
</html>

 

 

slide -> 템플릿 가져와서 구현하기 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
  />

</head>
<body>
    <!-- slide.html     -->

<!-- Swiper -->
<style>
    .swiper-wrapper{height:100vh;}
    .swiper-slide{    
        display: flex; 
        justify-content: center; 
        align-items: center;    
    }
    .swiper-button-prev:after{
        color:red;
        font-size:2rem;
    }
</style>
<div class="swiper mySwiper">

    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop:true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      
    });
  </script>




<article>
    <h2>슬라이드 테스트</h2>
    <div class="slide">
        <ul class="swiper-wrapper">
            <li class="swiper-slide"><img src="./img/01.jpg"></li>
            <li class="swiper-slide"><img src="./img/02.jpg"></li>
            <li class="swiper-slide"><img src="./img/03.jpg"></li>
            <li class="swiper-slide"><img src="./img/04.jpg"></li>
            <li class="swiper-slide"><img src="./img/05.jpg"></li>
        </ul>
        <div>
            <p class="next swiper-button-next"> </p>
            <p class="prev swiper-button-prev"> </p>
        </div>
    </div>
    <style>
        .slide{position: relative; overflow: hidden;}
        .slide img{width:100%;}
        ul,li{margin:0; padding:0; list-style-type: none;}
    </style>
</article>

<script>
    var swiper2 = new Swiper(".slide", {
      slidesPerView: 1,
      navigation: {
        nextEl: ".next",
        prevEl: ".prev",
      }      
    });
  </script>

  






</body>
</html>
반응형
저작자표시 비영리 변경금지

'교육 > Javascript&Jquery' 카테고리의 다른 글

자바스크립트 + 제이쿼리 입문 day 12  (0) 2023.01.18
자바스크립트 + 제이쿼리 입문 day 10  (0) 2023.01.11
자바스크립트 + 제이쿼리 입문 day 9  (0) 2023.01.09
자바스크립트 + 제이쿼리 입문 day 8  (0) 2023.01.06
자바스크립트 + 제이쿼리 입문 day 7  (0) 2023.01.04

관련글

티스토리툴바