개인공부/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">
컴퓨터 <input type="checkbox" name="checkHoby">인터넷 <input
type="checkbox" name="checkHoby">여행 <input type="checkbox" name="checkHoby">영화감상 <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">
컴퓨터 <input type="checkbox" name="checkHoby">인터넷 <input
type="checkbox" name="checkHoby">여행 <input type="checkbox" name="checkHoby">영화감상 <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">
컴퓨터 <input type="checkbox" name="checkHoby">인터넷 <input
type="checkbox" name="checkHoby">여행 <input type="checkbox" name="checkHoby">영화감상 <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
소중한 공감 감사합니다