새소식

인기 검색어

개인공부/JavaScript

HTML 로그인 FORM

  • -

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    background-image: url("/back.png");
  }

  table {
    border-spacing: 0px;
    border: 1px solid grey;
  }

  td, th {
    width: 500px;
    border: 1px solid black;
    padding: 10px;

  }

  tr td:nth-child(1) {
    background-color: lightgrey;
    font-style: inherit;
    text-align: center;
  }

  tr td:nth-child(2) {
    background-color: white;
  }

  select {
    width: 30px;
  }

</style>
<body>
<audio controls autoplay loop style="visibility: hidden">
  <source src="음악.mp3" type="audio/mp3">
</audio>
<form action="mailto:address@example.com" method="post">
  <table align="center">
    <thead>
    <th style="background-color: lightblue" colspan="2">회원 기본 정보</th>
    </thead>
    <tbody>
    <tr>
      <td style="width: 20%"><label><strong>아이디:</strong></label></td>
      <td><input type="text" maxlength="12"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>비밀번호:</strong></label></td>
      <td><input type="password" maxlength="12"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>비밀번호확인:</strong></label></td>
      <td><input type="password" maxlength="12"></td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>메일주소:</strong></label></td>
      <td><input type="email"> 예) id@domain.com</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>이름:</strong></label></td>
      <td><input type="text"></td>
    <tr>
    <tr>
      <th style="background-color: lightblue" colspan="2">개인 신상 정보</th>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>주민등록번호:</strong></label></td>
      <td><input type="number"> 예) 1234561234567</td>
    <tr>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>생일:</strong></label></td>
      <td><input type="text">년
        <select id="monts">
          <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 id="days">
          <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="1">13</option>
          <option value="2">14</option>
          <option value="3">15</option>
          <option value="4">16</option>
          <option value="5">17</option>
          <option value="6">18</option>
          <option value="7">이하 생략</option>
        </select>일
      </td>
    <tr>
    <tr>
      <td style="width: 20%"><label><strong>관심분야:</strong></label></td>
      <td>
        <input type="checkbox" name="checkHoby">
        컴퓨터&nbsp<input type="checkbox" name="checkHoby">인터넷&nbsp<input
        type="checkbox" name="checkHoby">여행&nbsp<input type="checkbox" name="checkHoby">영화감상&nbsp<input
        type="checkbox"
        name="checkHoby">음악감상
      </td>
    <tr>
    <tr style="height: 200px">
      <td style="width: 20%"><label><strong>자기소개:</strong></label></td>
      <td>
        <textarea style="width: 80%; height:180px"></textarea>
      </td>
    <tr>
    </tbody>
  </table>
  <div align="center">
    <br>
    <input type="submit" value="회원 가입">
    <input type="reset" value="다시 입력">
  </div>
</form>
</body>
</html>

JS 정규표현식 예외처리

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    background-image: url("/back.png");
  }

  table {
    border-spacing: 0px;
    border: 1px solid grey;
  }

  td, th {
    width: 500px;
    border: 1px solid black;
    padding: 10px;

  }

  tr td:nth-child(1) {
    background-color: lightgrey;
    font-style: inherit;
    text-align: center;
  }

  tr td:nth-child(2) {
    background-color: white;
  }

  select {
    width: 30px;
  }

  .errorPattern {
    border: 5px solid red;
  }

  .checkedPattern {
    border: 5px solid green;
  }

</style>
<body>
<!--<audio controls autoplay loop style="visibility: hidden">-->
<!--  <source src="음악.mp3" type="audio/mp3">-->
<!--</audio>-->
<form action="mailto:address@example.com" method="post" id="goForm">
  <table align="center">
    <thead>
    <th style="background-color: lightblue" colspan="2">회원 기본 정보</th>
    </thead>
    <tbody>
    <tr>
      <td style="width: 20%"><label><strong>아이디:</strong></label></td>
      <td><input type="text" maxlength="12" id="inputId" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>비밀번호:</strong></label></td>
      <td><input type="password" id="inputPW" maxlength="12" title="4~12자의 영문 대소문자와 숫자로만 입력하시오" required> 4~12자의 영문
        대소문자와
        숫자로만 입력
      </td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>비밀번호확인:</strong></label></td>
      <td><input type="password" maxlength="12" id="inputPWcheck" required></td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>메일주소:</strong></label></td>
      <td><input type="email" id="inputEm" required> 예) id@domain.com</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>이름:</strong></label></td>
      <td><input type="text" id="inputName" required></td>
    <tr>
    <tr>
      <th style="background-color: lightblue" colspan="2">개인 신상 정보</th>
    </tr>
    <!--    <tr>-->
    <!--      <td style="width: 20%"><label><strong>주민등록번호:</strong></label></td>-->
    <!--      <td><input type="number"> 예) 1234561234567</td>-->
    <!--    <tr>-->
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>생일:</strong></label></td>
      <td><input type="text" id="inputYear" required maxlength="4">년
        <select id="monts" required>
          <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 id="days required">
          <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="1">13</option>
          <option value="2">14</option>
          <option value="3">15</option>
          <option value="4">16</option>
          <option value="5">17</option>
          <option value="6">18</option>
          <option value="7">이하 생략</option>
        </select>일
      </td>
    <tr>
    <tr>
      <td style="width: 20%"><label><strong>관심분야:</strong></label></td>
      <td>
        <input type="checkbox" name="checkHoby">
        컴퓨터&nbsp<input type="checkbox" name="checkHoby">인터넷&nbsp<input
        type="checkbox" name="checkHoby">여행&nbsp<input type="checkbox" name="checkHoby">영화감상&nbsp<input
        type="checkbox"
        name="checkHoby">음악감상
      </td>
    <tr>
    <tr style="height: 200px">
      <td style="width: 20%"><label><strong>자기소개:</strong></label></td>
      <td>
        <textarea style="width: 80%; height:180px" required></textarea>
      </td>
    <tr>
    </tbody>
  </table>
  <div align="center">
    <br>
    <input type="submit" value="회원 가입" id="sbButton">
    <input type="reset" value="다시 입력">
  </div>
</form>
</body>
<script type="text/javascript">
  //비밀번호 영문자+숫자+특수조합(8~25자리 입력) 정규식

  const inputId = document.getElementById("inputId");
  const inputPW = document.getElementById("inputPW");
  const inputPWcheck = document.getElementById("inputPWcheck");
  const inputEm = document.getElementById("inputEm");
  const inputName = document.getElementById("inputName");
  const inputYear = document.getElementById("inputYear");
  const regexId = /[a-zA-Z0-9]{4,12}/;
  const regEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.) |(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  const regName = /^[a-zA-Z]{2,}|[가-힣]{2,}$/;
  const regBornYear = /19[0-9][0-9]|20\d{2,4}/;
  inputId.addEventListener("input", function (event) {
    checkForm(regexId, inputId);
  })
  inputPW.addEventListener("input", function (event) {
    checkForm(regexId, inputPW);
  })
  inputEm.addEventListener("input", function (event) {
    checkForm(regEmail, inputEm);
  })
  inputName.addEventListener("input", function (event) {
    checkForm(regName, inputName);
  })
  inputYear.addEventListener("input", function (event) {
    checkForm(regBornYear, inputYear);
  })

  inputPWcheck.addEventListener("input", function (event) {
    if ((inputPWcheck.value).length === 0) {
      inputPWcheck.removeAttribute('class')
    } else {
      if (!(inputPW.value === inputPWcheck.value)) {//패턴과 일치하지 않는다면
        inputPWcheck.classList.remove('checkedPattern');
        inputPWcheck.classList.add('errorPattern');
      } else {
        inputPWcheck.classList.remove('errorPattern');
        inputPWcheck.classList.add('checkedPattern');
      }
    }
  })

  function checkForm(pattern, element) {
    if ((element.value).length === 0) {
      element.removeAttribute('class')
    } else {
      if (!pattern.test(element.value)) {//패턴과 일치하지 않는다면
        element.classList.remove('checkedPattern');
        element.classList.add('errorPattern');
        element.setCustomValidity('[양식에 맞게 입력하시오]');
      } else {
        element.classList.remove('errorPattern');
        element.classList.add('checkedPattern');
        element.setCustomValidity('');
      }
    }
  }

</script>
</html>

JS 비정규표현식 예외처리

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    background-image: url("/back.png");
  }

  table {
    border-spacing: 0px;
    border: 1px solid grey;
  }

  td, th {
    width: 500px;
    border: 1px solid black;
    padding: 10px;

  }

  tr td:nth-child(1) {
    background-color: lightgrey;
    font-style: inherit;
    text-align: center;
  }

  tr td:nth-child(2) {
    background-color: white;
  }

  select {
    width: 30px;
  }

  .errorPattern {
    border: 5px solid red;
  }

  .checkedPattern {
    border: 5px solid green;
  }

</style>
<body>
<!--<audio controls autoplay loop style="visibility: hidden">-->
<!--  <source src="음악.mp3" type="audio/mp3">-->
<!--</audio>-->
<form action="mailto:address@example.com" method="post" id="goForm">
  <table align="center">
    <thead>
    <th style="background-color: lightblue" colspan="2">회원 기본 정보</th>
    </thead>
    <tbody>
    <tr>
      <td style="width: 20%"><label><strong>아이디:</strong></label></td>
      <td><input type="text" maxlength="12" id="inputId" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>비밀번호:</strong></label></td>
      <td><input type="password" id="inputPW" maxlength="12" title="4~12자의 영문 대소문자와 숫자로만 입력하시오" required> 4~12자의 영문
        대소문자와
        숫자로만 입력
      </td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>비밀번호확인:</strong></label></td>
      <td><input type="password" maxlength="12" id="inputPWcheck" required></td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>메일주소:</strong></label></td>
      <td><input type="email" id="inputEm" required> 예) id@domain.com</td>
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>이름:</strong></label></td>
      <td><input type="text" id="inputName" required></td>
    <tr>
    <tr>
      <th style="background-color: lightblue" colspan="2">개인 신상 정보</th>
    </tr>
    <!--    <tr>-->
    <!--      <td style="width: 20%"><label><strong>주민등록번호:</strong></label></td>-->
    <!--      <td><input type="number"> 예) 1234561234567</td>-->
    <!--    <tr>-->
    </tr>
    <tr>
      <td style="width: 20%"><label><strong>생일:</strong></label></td>
      <td><input type="text" id="inputYear" required maxlength="4">년
        <select id="monts" required>
          <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 id="days required">
          <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="1">13</option>
          <option value="2">14</option>
          <option value="3">15</option>
          <option value="4">16</option>
          <option value="5">17</option>
          <option value="6">18</option>
          <option value="7">이하 생략</option>
        </select>일 예) 1900 ~ 2022년
      </td>
    <tr>
    <tr>
      <td style="width: 20%"><label><strong>관심분야:</strong></label></td>
      <td>
        <input type="checkbox" name="checkHoby">
        컴퓨터&nbsp<input type="checkbox" name="checkHoby">인터넷&nbsp<input
        type="checkbox" name="checkHoby">여행&nbsp<input type="checkbox" name="checkHoby">영화감상&nbsp<input
        type="checkbox"
        name="checkHoby">음악감상
      </td>
    <tr>
    <tr style="height: 200px">
      <td style="width: 20%"><label><strong>자기소개:</strong></label></td>
      <td>
        <textarea style="width: 80%; height:180px" required></textarea>
      </td>
    <tr>
    </tbody>
  </table>
  <div align="center">
    <br>
    <input type="submit" value="회원 가입" id="sbButton">
    <input type="reset" value="다시 입력">
  </div>
</form>
</body>
<script type="text/javascript">
  const inputId = document.getElementById("inputId");
  const inputPW = document.getElementById("inputPW");
  const inputPWcheck = document.getElementById("inputPWcheck");
  const inputEm = document.getElementById("inputEm");
  const inputName = document.getElementById("inputName");
  const inputYear = document.getElementById("inputYear");
  inputId.addEventListener("input", function (event) {
    chckIdValidate(inputId);
  })
  inputPW.addEventListener("input", function (event) {
    chckIdValidate(inputPW);
  })
  inputEm.addEventListener("input", function (event) {
    chckIdValidateEmail(inputEm);
  })
  inputName.addEventListener("input", function (event) {
    chckIdValidateName(inputName);
  })
  inputYear.addEventListener("input", function (event) {
    checkYear(inputYear);
  })

  inputPWcheck.addEventListener("input", function (event) {
    if ((inputPWcheck.value).length === 0) {
      inputPWcheck.removeAttribute('class')
    } else {
      if (!(inputPW.value === inputPWcheck.value)) {//패턴과 일치하지 않는다면
        inputPWcheck.classList.remove('checkedPattern');
        inputPWcheck.classList.add('errorPattern');
      } else {
        inputPWcheck.classList.remove('errorPattern');
        inputPWcheck.classList.add('checkedPattern');
      }
    }
  })

  function chckIdValidate(T) {//4~12자의 영문 대소문자와 숫자로만 입력
    console.log('chckIdValidate 호출')
    let TCode = T.value;
    if (TCode.length === 0) {
      T.removeAttribute('class')
    } else {
      if (TCode.length > 3 && isAlphaNumeric(TCode)) {
        addClassCheckedPattern(T);
      } else {
        addErrorPattern(T);
      }
    }
  }

  function checkYear(T) {
    var Tcode = T.value;
    console.log(Tcode);
    if (Tcode.length === 0) {
      T.removeAttribute('class')
    } else if (!isonlyNumber(Tcode)) {
      addErrorPattern(T);
    } else if (!(1900 < Number.parseInt(Tcode) && Number.parseInt(Tcode) < 2022)) {
      addErrorPattern(T);
    } else {
      addClassCheckedPattern(T);
    }
  }

  function chckIdValidateName(T) {//한글 또는 영문으로 이루어진 이름 유효성 체크
    let TCode = T.value;
    var charFirst = TCode.charAt(0);
    var ccFirst = charFirst.charCodeAt(0);//입력값 중 첫글자를 가져와 영문이름인지 한문이름인지 검사 그 후 그에 맞는 반복문으로 진입함으로써 영한문 섞인 이름 입력 거부
    if (TCode.length === 0) {
      T.removeAttribute('class')//값이 없을경우 css class 모두 삭제
    } else if (((ccFirst > 64 && ccFirst < 91) || (ccFirst > 96 && ccFirst < 123))) {
      for (var i = 0; i < TCode.length; i++) {
        var char1 = TCode.charAt(i);
        var cc = char1.charCodeAt(0);
        console.log(cc);
        if (TCode.length > 2 && ((cc > 64 && cc < 91) || (cc > 96 && cc < 123))) {
          addClassCheckedPattern(T);
        } else {
          addErrorPattern(T);
          break;
        }
      }
    } else if ((ccFirst > 44032 && ccFirst < 55296)) {
      for (var j = 0; j < TCode.length; j++) {
        var char2 = TCode.charAt(j);
        var cc2 = char2.charCodeAt(0);
        console.log(cc2);
        if (TCode.length > 2 && ((cc2 > 44032 && cc2 < 55296))) {
          addClassCheckedPattern(T);
        } else {
          addErrorPattern(T);
          break;
        }
      }
    }
  }

  function chckIdValidateEmail(T) {//이메일 유효성 검사
    var indexAt = T.value.indexOf("@");
    var indexDot = T.value.indexOf(".");
    var AtCount = T.value.split('@').length - 1;
    var DotCount = T.value.split('.').length - 1;
    console.log(indexAt);
    console.log(indexDot);
    if (T.value.length === 0) {
      T.removeAttribute('class')//값이 없을경우 css class 모두 삭제
    } else if (AtCount === 0 || AtCount > 1) {
      addErrorPattern(T);
    } else if (DotCount === 0 || DotCount > 1) {
      addErrorPattern(T);
    } else {
      console.log(T.value.substring(0, indexAt));
      console.log(T.value.substring(indexAt + 1, indexDot));
      if (!isAlphaNumeric(T.value.substring(0, indexAt))) {//@ 앞부분 영문 대소문자와 숫자 인지 확인
        addErrorPattern(T);
      } else if (!isAlphaNumeric(T.value.substring(indexAt + 1, indexDot))) {//@ 뒷부분 영문 대소문자와 숫자 인지 확인
        addErrorPattern(T);
      } else {
        addClassCheckedPattern(T);
      }
    }
  }

  function addClassCheckedPattern(T) {
    T.classList.remove('errorPattern');
    T.classList.add('checkedPattern');
    T.setCustomValidity('');
  }

  function addErrorPattern(T) {
    T.classList.remove('checkedPattern');
    T.classList.add('errorPattern');
    T.setCustomValidity('[양식에 맞게 입력하시오]');
  }

  // 아이디 비번 영문 대소문자와 숫자체크
  function isAlphaNumeric(str) {
    var code;
    for (var i = 0; i < str.length; i++) {
      code = str.charCodeAt(i);
      if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha( A - Z )
        !(code > 96 && code < 123)) { // lower alpha ( a - z )
        return false;
      }
    }
    return true;
  }

  function isonlyNumber(str) {
    var code;
    for (var i = 0; i < str.length; i++) {
      code = str.charCodeAt(i);
      if (!(code > 47 && code < 58)) { // numeric (0-9)
        return false;
      }
    }
    return true;
  }
</script>
</html>

'개인공부 > JavaScript' 카테고리의 다른 글

BOM - 브라우저 객체 모델 정리  (1) 2022.09.15
JS 이벤트 총 정리  (0) 2022.09.15
자바스크립트 이벤트 종류  (0) 2022.09.15
자바스크립트 유효성 검사 정규식 활용  (0) 2022.09.13
[JavaScript] getElementById와 querySelector 차이점  (0) 2022.09.13
Contents

당신이 좋아할만한 콘텐츠

댓글 2

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

SHARE

DARK

MENU

티스토리툴바