Tiny Bunny
본문 바로가기
2023-02 몰입형 SW 정규 교육

[JavaScript] 회원가입 예제 (정규표현식 미사용)

gxxg 2023. 9. 19. 01:47
728x90

23. 09. 18

 

<!-- <input> 태그의 required 속성: 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시 -->
<!DOCTYPE html>
<html>
  <head>
    <title>유효성 검사 예제</title>
  </head>
  <body>
    <form id="frm">
      <table width="700" height="120" border="1" bordercolor="#CFEFFC">
        <tr>
          <td colspan="2" align="center" bgcolor="#CFEFFC">
            <b>회원 기본 정보</b>
          </td>
        </tr>
        <tr align="center">
          <td width="120px" bgcolor="#E8F7FD">
            <b>아이디</b>
          </td>
          <td align="left">
            <input type="text" id="uid" size="10" maxlength="15" required />
            4~12자의 영문 대소문자와 숫자로만 입력
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>비밀번호</b>
          </td>
          <td align="left">
            <input type="password" id="pw" size="10" maxlength="15" required />
            4~12자의 영문 대소문자와 숫자로만 입력
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>비밀번호 확인</b>
          </td>
          <td align="left">
            <input
              type="password"
              id="pwCheck"
              size="10"
              maxlength="15"
              required
            />
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>메일주소</b>
          </td>
          <td align="left">
            <input type="text" id="mail" size="15" required />
            예) id@domain.com
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>이름</b>
          </td>
          <td align="left">
            <input
              type="text"
              id="userName"
              size="15"
              maxlength="10"
              required
            />
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>집주소</b>
          </td>
          <td align="left">
            <input
              type="text"
              id="zipCode"
              placeholder="우편번호"
              readonly
              required
            />
            <input
              type="button"
              onclick="execDaumPostcode()"
              value="우편번호 찾기"
            />
            <input
              type="button"
              onclick="execDaumPostcodeReset()"
              value="초기화"
            /><br />
            <input
              type="test"
              id="address1"
              placeholder="도로명주소"
              size="40"
              readonly
              required
            /><br />
            <input
              type="text"
              id="address2"
              placeholder="지번주소"
              size="40"
              readonly
            /><br />
            <input
              type="text"
              id="address3"
              placeholder="상세주소"
              size="40"
              required
            />
            <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center" bgcolor="#CFEFFC">
            <b>개인 신상 정보</b>
          </td>
        </tr>
        <tr>
          <td align="center" bgcolor="#E8F7FD"><b>주민등록번호</b></td>
          <td>
            <input
              type="password"
              id="unm1"
              size="10"
              maxlength="6"
              placeholder="6자리"
              required
            />
            -
            <input
              type="password"
              id="unm2"
              size="10"
              maxlength="7"
              placeholder="7자리"
              required
            />
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>생일</b>
          </td>
          <td align="left">
            <input
              type="text"
              name="bir"
              id="year"
              size="5"
              maxlength="4"
              required
            />년
            <select name="bir" id="Month">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            월
            <select name="bir" id="Day">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="15">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
            일
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>관심분야</b>
          </td>
          <td align="left" id="hobby" required>
            <input type="checkbox" name="01" value="컴퓨터" />컴퓨터
            <input type="checkbox" name="01" value="인터넷" />인터넷
            <input type="checkbox" name="01" value="여행" />여행
            <input type="checkbox" name="01" value="영화감상" />영화감상
            <input type="checkbox" name="01" value="음악감상" />음악감상
          </td>
        </tr>
        <tr align="center">
          <td bgcolor="#E8F7FD">
            <b>자기소개</b>
          </td>
          <td align="left">
            <textarea
              id="my_intro"
              cols="70"
              rows="8"
              maxlength="1000"
              required
            ></textarea>
            <div id="text_count">0 / 1000</div>
          </td>
        </tr>
      </table>
      <table width="650" height="50" border="0" align="center">
        <tr>
          <td align="right">
            <input
              align="center"
              type="button"
              onclick="userCheck()"
              value="가입하기"
            />
          </td>
          <td align="left"><input type="reset" value="다시 입력" /></td>
        </tr>
      </table>
    </form>
    <script src="test2.js"></script>
  </body>
</html>
const userCheck = () => {
  // 아이디 검사
  if (uid.value == "") {
    alert("아이디를 입력하세요.");
    uid.focus();
    return false;
  }

  if (uid.value.length < 4 || uid.value.length > 12) {
    alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!");
    uid.focus();
    return false;
  }

  for (let i = 0; i < uid.value.length; i++) {
    let ch = uid.value.charAt(i);
    if (
      !(ch >= "0" && ch <= "9") &&
      !(ch >= "a" && ch <= "z") &&
      !(ch >= "A" && ch <= "Z")
    ) {
      alert("아이디는 영문 대소문자와 숫자만 가능합니다.");
      uid.focus();
      return false;
    }
  }

  // 비밀번호 검사
  if (pw.value == "") {
    alert("비밀번호를 입력하세요.");
    pw.focus();
    return false;
  }

  if (uid.value == pw.value) {
    alert("비밀번호는 아이디와 다르게 입력해야 합니다.");
    pw.focus();
    return false;
  }

  if (pw.value.length < 8 || pw.value.length > 25) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    pw.focus();
    return false;
  }

  var hasNumber = false;
  var hasLetter = false;
  var hasSpecialChar = false;

  for (let i = 0; i < pw.value.length; i++) {
    let ch = pw.value.charAt(i);
    if (ch >= "0" && ch <= "9") {
      hasNumber = true;
    } else if ((ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z")) {
      hasLetter = true;
    } else if ("!@#$%^*+=-".indexOf(ch) != -1) {
      hasSpecialChar = true;
    }
  }

  if (!(hasNumber && hasLetter && hasSpecialChar)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 구성되어야 합니다.");
    pw.focus();
    return false;
  }

  // 비밀번호 확인 검사
  if (pwCheck.value == "") {
    alert("비밀번호 확인을 입력하세요.");
    pwCheck.focus();
    return false;
  }

  if (pwCheck.value != pw.value) {
    alert("비밀번호가 일치하지 않습니다.");
    pwCheck.focus();
  }

  if (pwCheck.value.length < 8 || pwCheck.value.length > 25) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    pw.focus();
    return false;
  }

  var hasNumber = false;
  var hasLetter = false;
  var hasSpecialChar = false;

  for (let i = 0; i < pwCheck.value.length; i++) {
    let ch = pwCheck.value.charAt(i);
    if (ch >= "0" && ch <= "9") {
      hasNumber = true;
    } else if ((ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z")) {
      hasLetter = true;
    } else if ("!@#$%^*+=-".indexOf(ch) != -1) {
      hasSpecialChar = true;
    }
  }

  if (!(hasNumber && hasLetter && hasSpecialChar)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 구성되어야 합니다.");
    pw.focus();
    return false;
  }

  // 이메일 검사
  if (mail.value == "") {
    alert("이메일을 입력하세요.");
    mail.focus();
    return false;
  }

  var atPos = mail.value.indexOf("@");
  var dotPos = mail.value.lastIndexOf(".");

  if (atPos < 1 || dotPos < atPos + 2 || dotPos + 2 >= mail.length) {
    alert("이메일 형식이 올바르지 않습니다");
    mail.foucs();
    return flase;
  }

  // 이름 검사
  if (userName.value == "") {
    alert("이름을 입력하세요.");
    userName.focus();
    return false;
  }

  if (userName.value.length < 2 || userName.value.length > 4) {
    alert("이름은 한글로 최소 두 글자, 최대 네 글자만 가능합니다.");
    userName.focus();
    return false;
  }

  for (let i = 0; i < userName.value.length; i++) {
    let ch = userName.value.charAt(i);
    let chCode = ch.charCodeAt(0);
    if (!(chCode >= "가".charCodeAt(0) && chCode <= "힣".charCodeAt(0))) {
      alert("한글 이름만 가능합니다.");
      userName.focus();
      return false;
    }
  }

  // 집주소 검사
  if (zipCode.value == "") {
    alert("집주소를 입력하세요.");
    zipCode.focus();
    return false;
  }

  if (address3.value == "") {
    alert("상세주소를 입력하세요.");
    address3.focus();
    return false;
  }

  if (address3.value.length < 2 || address3.value.length > 25) {
    alert(
      "상세주소는 최소 두 글자, 최대 이십오 글자여야 합니다. 예) A동 101호"
    );
    address3.focus();
    return false;
  }

  // 주민등록번호 검사
  if (unm1.value == "" || unm2.value == "") {
    alert("주민번호를 입력하세요.");
    unm1.focus();
    return false;
  }

  var num1 = document.getElementById("unm1");
  var num2 = document.getElementById("unm2");

  if (num1.value.length != 6) {
    alert("주민등록 앞자리는 반드시 여섯 자리여야 합니다");
    num1.focus();
    return false;
  }

  if (num2.value.length != 7) {
    alert("주민등록 뒷자리는 반드시 일곱 자리여야 합니다");
    num2.focus();
    return false;
  }

  for (let i = 0; i < num1.value.length; i++) {
    let ch = num1.value.charAt(i);
    if (!(ch >= "0" && ch <= "9")) {
      alert("주민등록 번호는 숫자만 가능합니다");
      num1.focus();
      return false;
    }
  }

  for (let i = 0; i < num2.value.length; i++) {
    let ch = num2.value.charAt(i);
    if (!(ch >= "0" && ch <= "9")) {
      alert("주민등록 번호는 숫자만 가능합니다");
      num2.foucs();
      return false;
    }
  }

  // 생일
  var birthYear =
    num1.value.substring(0, 2) === "19" || num1.value.substring(0, 2) === "20"
      ? "19"
      : "20";
  year.value = birthYear + num1.value.substring(0, 2);

  var birthMonth = parseInt(num1.value.substring(2, 4));
  var birthDay = parseInt(num1.value.substring(4, 6));

  if (birthMonth < 1 || birthMonth > 12) {
    alert("생년월일이 올바르지 않습니다");
    return false;
  }

  if (birthDay < 1 || birthDay > 31) {
    alert("생년월일이 올바르지 않습니다");
    return false;
  }

  document.getElementById("Month").value = birthMonth;
  document.getElementById("Day").value = birthDay;

  // 관심분야
  var checkboxes = document.getElementsByName("01");
  var isChecked = false;
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    alert("관심분야는 최소 한 개 이상 선택해야 합니다.");
    return false;
  }

  // 자기소개
  var intro = document.getElementById("my_intro");
  if (intro.value == "") {
    alert("자기소개를 입력하세요. (200자 이상, 1000자 이하)");
    intro.focus();
    return false;
  } else if (!(intro.value.length >= 200 && intro.value.length <= 1000)) {
    alert("자기소개는 200자 이상 1000자 이하로 입력해야 합니다.");
    my_intro.focus();
    return false;
  }

  alert("회원가입이 완료되었습니다!");
  window.location.href = `mailto:${mail.value}?subject=회원가입 완료&body=회원가입을 환영합니다.`;
  return true;
};

const execDaumPostcode = () => {
  new daum.Postcode({
    oncomplete: function (data) {
      document.getElementById("zipCode").value = data.zonecode;
      document.getElementById("address1").value = data.address;
      document.getElementById("address2").value = data.jibunAddress;
      document.getElementById("address3").focus();
    },
  }).open();
};

const execDaumPostcodeReset = () => {
  document.getElementById("zipCode").value = null;
  document.getElementById("address1").value = null;
  document.getElementById("address2").value = null;
  document.getElementById("address3").value = null;
};
728x90
저작자표시 비영리 변경금지

'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글

[JSP/Servlet] 회원가입  (0) 2023.09.20
웹 프로그래밍 개념 (Web Programming)  (0) 2023.09.19
[JavaScript] 정규표현식을 사용한 회원가입 예제  (0) 2023.09.18
[JavaScript] 정규표현식  (0) 2023.09.18
[JavaScript] ver, let, const 차이점  (0) 2023.09.18

'2023-02 몰입형 SW 정규 교육' Related Articles

티스토리툴바