반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>회원가입페이지</title>
<script type="text/javascript">
const regexLogin = new RegExp("^[a-zA-z0-9]{4,12}$");
const regexEmail = new RegExp("^([\\w\\.\\_\\-])*[a-zA-Z0-9]+([\\w\\.\\_\\-])*([a-zA-Z0-9])+([\\w\\.\\_\\-])+@([a-zA-Z0-9]+\\.)+[a-zA-Z0-9]{2,8}$")
function val(){
let today = new Date();
let year = today.getFullYear();
let month = today.getMonth() + 1;
const userId = regexLogin.test(String(document.getElementById("id").value));
const userPass = regexLogin.test(String(document.getElementById("password").value));
const userEmail = regexEmail.test(String(document.getElementById("mail").value));
const arrPass = document.getElementsByName("password");
const arrInfo = document.getElementsByName("info");
const attInfo = document.getElementsByName("attention");
let flag = false;
for(var i=0; i<attInfo.length; i++) {
if(attInfo[i].checked){
flag = true;
break;
}
}
if(!userId){
alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야합니다")
document.querySelector(".at").removeAttribute('href');
return false;
}
else if(!userPass){
alert("패스워드는 4~12자의 영문 대소문자와 숫자로만 입력해야합니다")
document.querySelector(".at").removeAttribute('href');
return false;}
else if(!arrPass[0].value === arrPass[1].value){
alert("비밀번호가 불일치 합니다")
document.querySelector(".at").removeAttribute('href');
return false;}
else if(!userEmail){
alert("이메일을 잘못 입력하였습니다")
document.querySelector(".at").removeAttribute('href');
return false;}
else if(arrInfo.length < 5){
alert("정보를 모두 입력해야합니다.")
document.querySelector(".at").removeAttribute('href');
return false;}
else if(arrInfo[0].value > year || (arrInfo[0].value === year && arrInfo[1] > month)){
document.querySelector(".at").removeAttribute('href');
alert("미래에서 오셨군요 ^^")
return false;}
else if(!flag){
alert("관심분야를 체크해주세요")
document.querySelector(".at").removeAttribute('href');
return false;}
else {
alert("회원가입이 완료되었습니다.")}
}
</script>
</head>
<body background="123.jpg">
<audio src="bgm.mp3" controls autoplay></audio>
<form method="post">
<table width="800" height="600" border="1" align="center">
<tr>
<td align="center" colspan="3" style="background-color: lightskyblue; color: black">
<B>회원 기본 정보</B>
</td>
</tr>
<tr>
<td align="center" style="background-color:darkgray">
<B>아이디:</B></td>
<td>
<input type="text" name="id" id="id"> 4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td align="center" style="background-color:darkgray">
<B>비밀번호:</B></td>
<td>
<input id="password" type = password name="password"> 4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td align="center" style="background-color:darkgray"><B>비밀번호확인:</B></td>
<td>
<input type = password name="password" >
</td>
</tr>
<tr>
<td align="center" style="background-color:darkgray"><B>메일주소:</B></td>
<td>
<input name="mail" id="mail" size="25"> 예) id@domain.com
</td>
</tr>
<tr>
<td align="center" style="background-color:darkgray"><B>이름:</B></td>
<td>
<input name="info" type="text" size="25">
</td>
<tr align="center">
<td align="center" colspan="3" style="background-color: lightskyblue; color: black">
<B>개인 신상 정보</B>
</td>
</tr>
<tr>
<td align="center" style="background-color:darkgray"><B>생일:</B></td>
<td>
<input name="info" value="" >년
<select name="info">
<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="info">
<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="16">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>
<td align="center" style="background-color:darkgray"><B>관심분야:</B></td>
<td>
<input type="checkbox" name="attention" value="컴퓨터">컴퓨터
<input type="checkbox" name="attention" value="인터넷">인터넷
<input type="checkbox" name="attention" value="여행">여행
<input type="checkbox" name="attention" value="영화감상">영화감상
<input type="checkbox" name="attention" value="음악감상">음악감상
</td>
</tr>
<tr align="center">
<td style="background-color:darkgray"><B>자기소개:</B></td>
<td align="left" style="margin:0 0 0 0;">
<textarea name="info" cols="70" rows="10" style = "width:80%;height:90%"></textarea>
</td>
</tr>
</table>
<div align="center" style="margin-top:20px;">
<button type="submit" onclick="val()" value="회원 가입">
<a class="at" style="text-decoration: none;color: black" href="mailto:dack1yy@gmail.com">회원가입</a>
</button>
<input align="center" type="reset" value="다시 입력">
</div>
</form>
</body>
</html>반응형
'Web' 카테고리의 다른 글
| [JSP] include 액션 태그를 이용한 페이지 이동 (중복된 공간) (1) | 2022.09.16 |
|---|---|
| http 주요 에러코드 (0) | 2022.09.15 |
| HTTP 와 HTTPS 의 차이 (4) | 2022.09.15 |
| [자바스크립트] 회원가입페이지 정규표현식X (0) | 2022.09.14 |
| [자바스크립트] 계산기 만들기 (0) | 2022.09.13 |