본문 바로가기
JavaScript

[#JavaScript] checkbox toggle 체크박스 토글, 이메일 로그인/핸드폰번호 로그인

shab
반응형

 

 

 

 

 

 

 

 

 

 

 

 

① HTML

 

<div class="container">
  <div class="login-wrap">
     <form>
        <div class="login-input">
           <input type="email" placeholder="이메일 주소" />
           <input type="phone" placeholder="휴대폰 번호(-제외하고 입력)" maxlength="11" style="display:none" />
           <div class="pw-wrap">
              <input type="password" placeholder="비밀번호" minlength="6" maxlength="11" id="pw" />
              <img src="./asset/image/ico/icon-view-off-modi.svg" id="eyes" />
           </div>
           <p><input type="checkbox" id="phone-login" /><label for="phone-login">휴대폰 번호로 로그인</label></p>
        </div>

        <div class="login-btn-wrap">
           <button type="submit">로그인</button>
        </div>
     </form>
  </div>
</div>

 

 

 

 

 

② Script

 

// 비밀번호 input focus/focusout에 따라 border-bottoer 변경 
$(".pw-wrap input").focus(function() {
  $(".pw-wrap").css("border-bottom", "1px solid #2299f2");
});

$(".pw-wrap input").focusout(function() {
  $(".pw-wrap").css("border-bottom", "1px solid #dee0e4")
});

// 눈 모양 아이콘 클릭 시 비밀번호 입력한 부분 보이게 하기
$("#eyes").click(function() {
  $(".pw-wrap input").toggleClass("active");

  if($(".pw-wrap input").hasClass("active") == true) {
    $('.pw-wrap img').attr('src', './asset/image/ico/icon-view-off-on-modi.svg');
    $(".pw-wrap input").attr("type", "text");
  } else {
    $('.pw-wrap img').attr('src', './asset/image/ico/icon-view-off-modi.svg');
    $(".pw-wrap input").attr("type", "password");
  }
});

// 체크박스 선택 시 이메일 로그인/휴대폰 로그인 토글 
$("#phone-login").click( function() {
  $(this).prop("checked", this.checked);

  if($(this).prop("checked") == true) {
    $(".login-input input[type=email]").val("");
    $(".login-input input[type=email]").hide();
    $(".login-input input[type=phone]").show();
  } else {
    $(".login-input input[type=phone]").val("");
    $(".login-input input[type=phone]").hide();
    $(".login-input input[type=email]").show();
  }
});

// 로그인 조건 미충족 시 로그인 버튼 비활성화
function disabledBtn() {
  $("button[type=submit]").attr("disabled", true);
  $("button[type=submit]").css("transition-duration", "500ms");
}

// 유효성 검사
$("input").on("focus change focusout keyup", function(){
  var isChecked = true;
  var phoneVal = $("input[type=phone]").val();
  var emailVal = $("input[type=email]").val();
  var pwVal = $("#pw").val();

  var reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

  var reg_phone = /^[0-9]+$/;

  if($("#phone-login").prop("checked") == false && reg_email.test(emailVal) == false) {
    isChecked = false;
    disabledBtn();
    return false;
  } else if($("#phone-login").prop("checked") == true && phoneVal.length != 11) {
    isChecked = false;
    disabledBtn();
    return false;
  } else if($("#phone-login").prop("checked") == true && phoneVal.substr(0,3) != "010") {
    isChecked = false;
    disabledBtn();
    return false;
  } else if($("#phone-login").prop("checked") == true && reg_phone.test(phoneVal) == false) {
      isChecked = false;
      disabledBtn();
      return false;
  } else if(pwVal.length < 6) {
    isChecked = false;
    disabledBtn();
    return false;
  }

  // 조건 충족할 시 로그인 버튼 활성화
  if(isChecked == true) {
    $("button[type=submit]").attr("disabled", false);
    $("button[type=submit]").css("transition-duration", "500ms");
  }
});

 

 

 

 

 

③ CSS

 

.container .login-wrap {
  display: flex;
  flex-direction: column;
  padding: 0px 32px;
}

.container .login-wrap h1 {
  font-size: 28px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.68px;
  color: #2e3640;
}

.container .login-wrap .login-input {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  margin-bottom: 25px;
}

.container .login-wrap .login-input p {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
}

.container .login-wrap .login-input input {
  border: none;
  border-bottom: 1px solid #dee0e4;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 300;
  color: #43494f;
}

.container .login-wrap .login-input input[type=password],
.container .login-wrap .login-input input[type=text] {
  margin-top: 16px;
  position: relative;
  border-bottom: none;
  width: 100%;
}


.container .login-wrap .login-input input[type=checkout] {
  background
}

.eyes {
  position: absolute;
  top: 0;
  bottom: 30%;
  right: 32px; margin: auto 2px; height: 30px; font-size: 22px; cursor: pointer;

}

.container .login-wrap .login-input input[type=email]:focus,
.container .login-wrap .login-input input[type=number]:focus,
.container .login-wrap .login-input input[type=phone]:focus {
  outline: none;
  border-bottom: 1px solid #2299f2 !important;
  transition-duration: 500ms;
}

.container .login-wrap .login-input input[type=password]:focus,
.container .login-wrap .login-input input[type=text]:focus {
  outline: none;
}

.container .login-wrap .login-input input:focus {
  border: none;
  border-bottom: blue;
}

.container .login-wrap .login-input .pw-wrap {
  border: none;
  border-bottom: 1px solid #dee0e4;
  display: flex;
  justify-content: space-between;
  transition-duration: 500ms;
}

.container .login-wrap .login-input .pw-wrap img {
  margin-bottom: -15px;
}

.container .login-wrap .login-input input[type=checkbox] {
  background:url(../image/ico/button-checkbox-disable.svg) no-repeat !important;
  border:0;
  outline: none;
  width:30px;
  height:30px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.container .login-wrap .login-input input[type=checkbox]:checked {
  background:url(../image/ico/button-checkbox-enable.svg) no-repeat !important;
  border:0;
  outline: none;
  width:30px;
  height:30px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.container .login-wrap .login-input p label {
  color: #b0b5c1;
}

.container .login-wrap .login-input input[type=checkbox]:checked+label {
  color: #43494f;
}

.container .login-wrap .login-btn-wrap button[type=submit] {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  background-color: #2299f2;
  color: white;
  font-weight: 300;
  font-size: 16px;
  outline: none;
}

.container .login-wrap .login-btn-wrap button[type=submit]:disabled {
  background-color: #eceef2;
  color: #b0b5c1;
}

.container .login-wrap .pw-signup-wrap {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.container .login-wrap .pw-signup-wrap .signup {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.34px;
  color: #7a848c;
}

 

 

 

 

 

④ 전체 코드

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no" />
  <link rel="stylesheet" href="./asset/style/aa.css" type="text/css" />
  <script type="text/javascript" src="./asset/script/jquery.js"></script>
</head>

<body>
  <div class="container">

    <div class="login-wrap">
      <form>
        <div class="login-input">
          <input type="email" placeholder="이메일 주소" />
          <input type="phone" placeholder="휴대폰 번호(-제외하고 입력)" maxlength="11" style="display:none" />
          <div class="pw-wrap">
            <input type="password" placeholder="비밀번호" minlength="6" maxlength="11" id="pw" />
            <img src="./asset/image/ico/icon-view-off-modi.svg" id="eyes" />
          </div>
          <p><input type="checkbox" id="phone-login" /><label for="phone-login">휴대폰 번호로 로그인</label></p>
        </div>

        <div class="login-btn-wrap">
          <button type="submit" disabled>로그인</button>
        </div>
      </form>
    </div>

  </div>


  <script type="text/javascript">
    $(".pw-wrap input").focus(function() {
      $(".pw-wrap").css("border-bottom", "1px solid #2299f2");
    });

    $(".pw-wrap input").focusout(function() {
      $(".pw-wrap").css("border-bottom", "1px solid #dee0e4")
    });

    $("#eyes").click(function() {
      $(".pw-wrap input").toggleClass("active");

      if ($(".pw-wrap input").hasClass("active") == true) {
        $('.pw-wrap img').attr('src', './asset/image/ico/icon-view-off-on-modi.svg');
        $(".pw-wrap input").attr("type", "text");
      } else {
        $('.pw-wrap img').attr('src', './asset/image/ico/icon-view-off-modi.svg');
        $(".pw-wrap input").attr("type", "password");
      }
    });

    $("#phone-login").click(function() {
      $(this).prop("checked", this.checked);

      if ($(this).prop("checked") == true) {
        $(".login-input input[type=email]").val("");
        $(".login-input input[type=email]").hide();
        $(".login-input input[type=phone]").show();
      } else {
        $(".login-input input[type=phone]").val("");
        $(".login-input input[type=phone]").hide();
        $(".login-input input[type=email]").show();
      }
    });

    function disabledBtn() {
      $("button[type=submit]").attr("disabled", true);
      $("button[type=submit]").css("transition-duration", "500ms");
    }

    $("input").on("focus change focusout keyup", function() {
      var isChecked = true;
      var phoneVal = $("input[type=phone]").val();
      var emailVal = $("input[type=email]").val();
      var pwVal = $("#pw").val();

      var reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

      var reg_phone = /^[0-9]+$/;

      if ($("#phone-login").prop("checked") == false && reg_email.test(emailVal) == false) {
        isChecked = false;
        disabledBtn();
        return false;
      } else if ($("#phone-login").prop("checked") == true && phoneVal.length != 11) {
        isChecked = false;
        disabledBtn();
        return false;
      } else if ($("#phone-login").prop("checked") == true && phoneVal.substr(0, 3) != "010") {
        isChecked = false;
        disabledBtn();
        return false;
      } else if ($("#phone-login").prop("checked") == true && reg_phone.test(phoneVal) == false) {
        isChecked = false;
        disabledBtn();
        return false;
      } else if (pwVal.length < 6) {
        isChecked = false;
        disabledBtn();
        return false;
      }

      if (isChecked == true) {
        $("button[type=submit]").attr("disabled", false);
        $("button[type=submit]").css("transition-duration", "500ms");
      }
    });
  </script>
</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

완성하면 이렇게 작동한다

 

 

 

 

 

 

 

 

 

반응형

'JavaScript' 카테고리의 다른 글

[#. JavaScript] 문자를 숫자로 형변환하는 parseInt, Number의 차이 parseInt, parseFloat의 차이  (0) 2020.11.18
[#. JavaScript] 브라우저 화면 넓이(width), 높이(height) 값 가져오기  (0) 2020.11.11
[#JavaScript] 버튼 전체 동의 체크박스, 체크 및 체크 해제  (0) 2020.09.08
[#JavaScript] Date, ISO 8601, Safari 사파리와 Chrome 크롬 시간 출력  (0) 2020.08.19
[#JavaScript] 자바스크립트 비동기 처리와 콜백 함수, Promise 프로미스, Async await  (0) 2020.08.11

'JavaScript' Related Articles

티스토리툴바