<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sign up.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container3">
<div class="title1">
<a href="main.html">
<input type="button" class="mainbutton" value="NAVER">
</a>
</div>
<div class="title1">
<h1> 회원가입 </h1>
</div>
<hr />
<div class="mydiv1">
<label class="lbl1">아이디</label>
<input type="text" placeholder="아이디" id="userid" />
<input type="button" value="중복확인" id="btnIdCheck" />
</div>
<div class="mydiv1">
<label class="lbl1">암호</label>
<input type="password" placeholder="******" id="userpw" />
</div>
<div class="mydiv1">
<label class="lbl1">암호확인</label>
<input type="password" placeholder="******" id="userpwcheck" />
</div>
<div class="mydiv1">
<label class="lbl1">이름</label>
<input type="text" placeholder="이름" id="username" />
</div>
<div class="mydiv1">
<label class="lbl1">휴대폰번호</label>
010 - <input type="text" id="number" />
</div>
<div class="mydiv1">
<label class="lbl1">생년월일</label>
<input type="text" placeholder="년(4자)" id="birthyear" />
<select name="month" required>
<option value="" selected>월</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<input type="text" placeholder="일" id="birthday" />
</div>
<div class="mydiv1">
<label class="lbl1">이메일</label>
<input type="text" placeholder="이메일" id="useremail" />
<label>@</label>
<select>
<option>naver.com</option>
<option>daum.net</option>
<option>gmail.com</option>
</select>
<input type="button" value="이메일인증" id="emailcheck" />
</div>
<div class="mydiv1">
<label class="lbl1">약관동의</label>
<input type="checkbox" id="chk1" />
</div>
<div class="mydiv1">
<label class="lbl1"></label>
<input type="button" value="회원가입" id="btn" />
<label class="lbl1"></label>
<a href="login.html">
<input type="button" value="로그인" />
</a>
</div>
</div>
<script>
const id = document.getElementById('userid');
const btnChk = document.getElementById('btnIdCheck');
const pw = document.getElementById('userpw');
const pwcheck = document.getElementById('userpwcheck');
const name = document.getElementById('username');
const email = document.getElementById('useremail');
const number = document.getElementById('number');
const year = document.getElementById('birthyear');
const month = document.getElementById('month');
const day = document.getElementById('birthday');
const btn = document.getElementById('btn');
const chk1 = document.getElementById('chk1');
btn.addEventListener('click', function() {
if (id.value === "") { // '===' <- 비교할 때 사용
alert('아이디를 입력하세요');
id.focus(); // 커서 이동
return false; // 백엔드로 전송하지 않음
}
if (pw.value === "") {
alert('암호를 입력하세요.');
pw.focus();
return false;
}
if (pwcheck.value === "") {
alert('암호확인을 입력하세요.');
pwcheck.focus();
return false;
}
if(pw.value !== pwcheck.value) { // !== <-'다르다'
alert('암호가 일치하지 않습니다')
pwcheck.focus();
return false;
}
if (name.value === "") {
alert('이름을 입력하세요.');
name.focus();
return false;
}
if (number.value === "") {
alert('휴대폰번호를 입력하세요.');
number.focus();
return false;
}
if (year.value === "") {
alert('생년월일을 입력하세요.');
year.focus();
return false;
}
if (day.value === "") {
alert('생년월일을 입력하세요.');
day.focus();
return false;
}
if (email.value === "") {
alert('이메일을 입력하세요.');
email.focus();
return false;
}
if(chk1.checked === false) {
alert('약관동의하세요.');
return false;
}
console.log('백엔드로 데이터 전송');
});
// keyup <- 입력했을 때 실행
id.addEventListener('keyup', function(){
if( id.value.length > 0 ){
const url = `http://ihongss.com/json/idcheck.json?userid=${id.value}`;
let xhr = new XMLHttpRequest(); // 호출하기 위한 라이브러리
xhr.open('GET', url); // 호출주소
xhr.send(); // 호출
// 호출 후 결과 받기
xhr.addEventListener('load', function(){ // Listener -> 로드되는 타이밍을 모르니까 기다리는거임
const data = JSON.parse(xhr.response); // JSON.parse(@@@) string타입을 object로 바꿈
// console.log(data);
if(data.ret === 'y'){
btnChk.value='사용불가';
}
else if(data.ret === 'n'){
btnChk.value='사용가능';
}
});
// 백엔드로 현재의 아이디 값을 전달하면 백엔드에서 중복확인 결과
// btnChk.value값을 사용가능, 사용불가로 변경
}
else{
btnChk.value = '중복확인';
}
});
</script>
</body>
</html>
20211208-