본문 바로가기
> IT 노트/활용

[JS] 아이디, 비번 입력 확인 (공백체크)

by 자몽주스 2024. 3. 22.
728x90
반응형
아이디 입력 확인
HTML
 <form action="success.html">
          <div class="my-3">
            <input type="text" class="form-control" id="email" />
          </div>
          <div class="my-3">
            <input type="password" class="form-control" id="pw" />
          </div>
          <button type="submit" class="btn btn-primary" id="send">전송</button>
          <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>
JS
$("form").on("submit", function (e) {
  if (document.getElementById("email").value == "") {
    alert("아이디입력안함.");
    e.preventDefault();
  }
});

 e.preventDefault();

사용해서 폼 전송 막기.

 


아이디와 비번확인 공백체크
JS
$("form").on("submit", function (e) {
  if (document.getElementById("email").value == "") {
    alert("아이디입력안함.");
    e.preventDefault();
  }
  if (document.getElementById("pw").value == "") {
    alert("비번 입력하쇼");
    e.preventDefault();
  }
});

비번이 6자 미만이면 알림띄우기
JS
$("form").on("submit", function (e) {
  if (document.getElementById("email").value == "") {
    alert("아이디입력안함.");
    e.preventDefault();
  }
  if (document.getElementById("pw").value == "") {
    alert("비번 입력하쇼");
    e.preventDefault();
  }
  if (document.getElementById("pw").value.length < 6) {
    alert("왜케 비번이 짧음?");
    e.preventDefault();
  }
});
728x90
반응형