마카로닉스

1907 No

심플한 회원가입 페이지 만들기 - 정규식 폼검사

2022-08-29 07:30:02 By 라이트 0 461 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

index.html

<!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">
  <link rel="stylesheet" href="./join.css"></link>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
  <script src="../join.js"></script>
</head>
<body>


<div class="wrapper">
    <div class="form-container">
      <form method="post"   onSubmit="return joinMember();"  autocomplete="off">
        <h3>회원 가입</h3>
        <p></p>
        <div class="form-group">
          <input type="text" class="formControl"  name="name" id="name"  placeholder="이름"  required autocomplete="off">
          <span class="error"></span>
        </div>

        <div class="form-group">
          <input type="text" class="formControl" name="id" id="id"  placeholder="아이디"  required autocomplete="off">
          <span class="error"></span>
        </div>

        <div class="form-group">
          <input type="email" class="formControl" name="email" id="email"  placeholder="이메일"  required autocomplete="off">
          <span class="error"></span>
        </div>

        <div class="form-group">
          <input type="password" class="formControl" name="password" id="password"  placeholder="비밀번호"  required autocomplete="off">
          <span class="error"></span>
        </div>        

        <div class="form-group">
          <input type="password" class="formControl" name="passwordConfirm" id="passwordConfirm"  placeholder="비밀번호 확인"  required autocomplete="off">
          <span class="error"></span>
        </div>           

        <button type="submit" >가입</button>
      </form>
    </div>
</div>



</body>
</html>

join.css

body{
  height: auto;
}  
.wrapper {
      min-height: 100vh;
      display: flex;
      align-items: center;
      display: block;
      margin-top: 100px;
      color: #000;
      font-size: 15px;
}
.wrapper input, .wrapper textarea,  .wrapper button {
  color: #000;
  font-size: 15px;
  outline: none !important;
}
.wrapper input:focus,.wrapper textarea:focus,.wrapper button:focus {
     outline: none !important;
}
.wrapper textarea {
      resize: none;
}
.wrapper h3 {
      margin: 0 0 12px 0;
      font-size: 45px;
      text-align: center;
      text-transform: uppercase;
}
.wrapper p {
      padding: 0 10px;
      margin: 0 0 55px 0;
      text-align: center;
      line-height: 1.8;
}
.wrapper  .form-container {
  max-width: 450px;
  margin: auto;
  padding: 70px 100px 80px;
  border: 5px solid #000000b3;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 25px 5px rgba(0, 0, 0, 0.2);
}
.form-container  .form-group {
      position: relative;
      display: block;
      margin-bottom: 48px;
}
.form-container .formControl {
      width: 100%;
      height: 43px;
      display: block;
      font-size: 15px;
      border: none;
      border-bottom: 2px solid #000;
      background: none;
      margin-bottom: 10px;
}
.form-container  button[type="submit"] {
  width: 162px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px auto 0;
  padding: 0;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background-color: #000;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.2s linear;
}
.form-container  button[type="submit"]:hover {
      background-color: #0000008f;
}
.error{
  display: none;
  color: rgb(187, 28, 28);
  font-weight: bold;
  margin-top: 5px;
}

join.js

$(function () {
    formChek();
});


function joinMember() {
    const name = $("#name").val();
    const id = $("#id").val();
    const email = $("#email").val();
    const password = $("#password").val();
    const passwordConfirm = $("#passwordConfirm").val();
    console.log(name, id, email, password, passwordConfirm);

    if (!name) {
        alert("이름을 입력해 주세요.");
        $("#name").focus();
        return false;
    }

    if (!id) {
        alert("아이디를 입력해 주세요.");
        $("#id").focus();
        return false;
    }

    if (!email) {
        alert("이메일을 입력해 주세요.");
        $("#email").focus();
        return false;
    }

    if (!password) {
        alert("비밀번호를 입력해 주세요.");
        $("#password").focus();
        return false;
    }

    if (!passwordConfirm) {
        alert("비밀번호 확인을 입력해 주세요.");
        $("#passwordConfirm").focus();
        return false;
    }


    const error = document.querySelectorAll(".error");
    let errorCount = 0;

    const result = error.forEach((e) => {
        const display = $(e).css("display");
        if (display != "none") {
            errorCount = errorCount + 1;
            return;
        }
    })

    console.log("errorCount : " + errorCount);
    if (errorCount > 0) {
        alert("폼 입력 형식에 맞지 않습니다.");
        return false;
    } else {
        alert("전송 되었습니다.");
        return false;
    }

}


function formChek() {

    $("#name").on("keyup", function (event) {
        var kor_check = /([^가-힣ㄱ-ㅎㅏ-ㅣ\x20])/i;
        const name = $(this).val();
        if (kor_check.test(name) || name.length > 3) {
            $(this).next().text("한글 3글자 까지만 입력할 수 있습니다.");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        $(this).next().hide();
    });


    $("#id").on("keyup", function (event) {
        var kor_check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
        const id = $(this).val();
        if (kor_check.test(id)) {
            $(this).next().text("한글입력 불가능하며 12글자 이하만 입력할 수 있습니다.");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        if (id.length > 12) {
            $(this).next().text("한글입력 불가능하며 12글자 이하만 입력할 수 있습니다.");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        $(this).next().hide();

    });


    $("#email").on("keyup", function (event) {
        var reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
        const email = $(this).val();
        if (!reg.test(email)) {
            $(this).next().text("이메일 형식에 맞지 않습니다. ");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        if (email.length > 25) {
            $(this).next().text("이메일은 25자까지 입력가능 합니다.");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        $(this).next().hide();

    });



    $("#password").on("keyup", function (event) {
        const password = $(this).val();
        if (password.length > 12) {
            $(this).next().text("비밀번호는 12자리까지만 입력 가능합니다.");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        $(this).next().hide();
    });

    $("#passwordConfirm").on("keyup", function (event) {
        const password = $("#password").val();
        const passwordConfirm = $(this).val();
        if (password != passwordConfirm) {
            $(this).next().text("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
            $(this).next().show();
            $(this).focus();
            return false;
        }
        $(this).next().hide();
    });


}