새소식

인기 검색어

개인공부/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>
Contents

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

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