회원가입 페이지를 만들고, 몇가지 동작을 추가한다.
HTML
<body>
<h1>kakao</h1>
<div class="container">
<h2>카카오 계정 정보를 입력해 주세요.</h2>
<form action="" id="frm">
<ul>
<li><label for="id">카카오계정 이메일</label></li>
<li class="border_bottom">
<input type="text" name="id" id="id" placeholder="아이디를 입력하세요"><span
class="sub_txt">@kakao.com</span>
</li>
<li class="id_result"></li>
<ul>
<li>입력한 카카오메일로 카카오 계정에 로그인할 수 있습니다.</li>
<li>한번 만든 카카오 메일은 변경할 수 없으니, 오타가 없도록 신중히 확인해 주세요.</li>
<li>생성한 카카오메일로 카카오계정과 관련한 알림을 받아볼 수 있습니다.</li>
</ul>
<li><label for="pass">비밀번호</label></li>
<li class="border_bottom">
<input type="password" name="pass" id="pass" placeholder="비밀번호(8~32자리)">
</li>
<li class="border_bottom">
<input type="password" id="pass_chk" placeholder="비밀번호 재입력">
</li>
<li class="pass_check"></li>
<li><label for="nick">닉네임</label></li>
<li class="border_bottom">
<input type="text" name="nick" id="nick" placeholder="닉네임을 입력하세요"><span class="sub_txt" id="nick_length">0/20</span>
</li>
<li><label for="tel">전화번호</label></li>
<li class="border_bottom">
<select name="gcode" id="gcode">
<option value="82">+82</option>
<option value="1">+1</option>
<option value="84">+84</option>
<option value="55">+55</option>
</select><input type="text" name="tel" id="tel" placeholder="전화번호 입력하세요 -는 빼고" class="left_border">
</li>
<li>
<button type="button" class="btn_send_no">인증번호 전송</button>
</li>
<li>
<button class="btn_next">다음</button>
</li>
</ul>
</form>
</div>
</body>div(container)으로 전체를 묶고, from태그안에 ul, li로 항목들을 만들어 주었다.
ul안 에서 계정 생성 주의사항은 자식요소 ul으로 다시 묶어주었다.
css, javascript에서 이용하도록 class와 id를 지정하였다.
CSS
.true {
color: blue;
font-weight: bold;
}
.false {
color: red;
font-weight: bold;
}다른 CSS는 형식에 맞게 지정하고 생략하였다. js로 이용할 CSS는 true 클래스, false 클래스로 만들어 주었다.
회원가입할 때 아이디나 비밀번호에 올바르지 않은 형식을 지정했을 때는 빨간 글자, 올바른 형식을 입력했을 때는 파란글자를 지정해주기 위해 클래스를 만들었다. 자바스크립트로 클래스를 변경해주는 동작을 지정할 것이다.
JavaScript
1. 아이디 체크
function idCheck(){
var id = document.querySelector('#id');
var id_result = document.querySelector('.id_result');
if(id.value.length < 8 || id.value.length > 20){
id_result.innerHTML = '아이디는 글자수가 8~20글자 사이로 사용하세요';
if(id_result.classList.contains('true')) //true 클래스가 있는지?
id_result.classList.remove('true'); //true 클래스 제거
if(!id_result.classList.contains('false'))
id_result.classList.add('false'); // false 클래스 추가
return false;
}
if(!isNaN(id.value)){
id_result.innerHTML = '아이디는 숫자만 쓸수 없습니다.';
if(id_result.classList.contains('true'))
id_result.classList.remove('true');
if(!id_result.classList.contains('false'))
id_result.classList.add('false');
return false;
}
if(!id_result.classList.contains('true'))
id_result.classList.add('true');
id_result.innerHTML = '아이디가 올바르게 입력되었습니다.';
return true;
}아이디 형식을 체크하는 함수 idCheck를 만든다.
아이디는 8글자에서 20글자 사이에서 사용해야 하고 숫자만 입력해야 한다. 이것을 벗어난 경우에는 아이디 입력칸 아래에 경고메세지를 빨갛게 출력하고, 올바르게 입력하면 올바르게 입력되었다는 파란 텍스트를 나타낸다.
숫자만 쓸수 없는 것은 숫자가 아닌것의 반대(!), 즉 숫자인것이 true인 조건을 if로 지정했다.
classList.contains로 해당 클래스가 있는지 확인하고 remove나 add로 제거하거나 추가한다.
잘못된 형식일 때는 true 클래스를 지우고 false 클래스를 추가한다. 그리고 폼 제출이 되지 않도록 이벤트 처리하기 위해 false를 리턴한다.
올바른 형식일 때는 false 클래스를 지우고 true 클래스를 추가한다. 폼제출 하도록 이벤트 처리하기 위해서 true를 리턴한다.
2. 비밀번호 체크
function passCheck(){
var pass = document.querySelector('#pass');
var pass_chk = document.querySelector('#pass_chk');
var pass_check = document.querySelector('.pass_check');
var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^])[A-Za-z\d@$!%*#?&^]{8,20}$/;
var flag = false;
if(!reg.test(pass.value)){
pass_check.innerHTML = '암호 형식에 일치하지 않습니다.'
flag = true;
}else if(pass.value != pass_chk.value){
pass_check.innerHTML = '암호가 일치하지 않습니다.';
flag = true;
}
if(flag){
pass_check.classList.remove('true');
pass_check.classList.add('false');
return false;
}
pass_check.innerHTML = '암호가 정상적으로 입력되었습니다.';
pass_check.classList.remove('false');
pass_check.classList.add('true');
return true;
}add는 없을 때 추가하고, 있으면 유지한다.
remove는 있을 때만 삭제하기 때문에 if로 모든 조건을 지정할 필요가 없다.
3. 닉네임, 전화번호 체크
function checkNick(){
var nick = document.querySelector('#nick');
var nick_length = document.querySelector('#nick_length');
if(nick.value.length > 20){
nick.value = nick.value.substr(0,20);
return false;
}
nick_length.innerHTML = `${nick.value.length}/20`;
return true;
}
function checkTel(){
var tel = document.querySelector("#tel");
console.log(isNaN(tel.value),tel.value.length != 10, tel.value.length != 11)
if(isNaN(tel.value)){
tel.classList.remove('true');
tel.classList.add('false');
return false;
}
if(tel.value.length != 10 && tel.value.length != 11){
tel.classList.remove('true');
tel.classList.add('false');
return false;
}
tel.classList.remove('false');
tel.classList.add('true');
return true;
}동일하게 클래스 추가, 삭제한다.
window.onload = () => {
var frm = document.querySelector("#frm");
id.onkeyup = idCheck;
pass.onkeyup = pass_chk.onkeyup = passCheck;
nick.onkeyup = checkNick;
tel.onkeyup = checkTel;
frm.onsubmit = (e) => {
if(!idCheck())
e.preventDefault();
else if(!passCheck())
e.preventDefault();
else if(!checkNick)
e.preventDefault();
else if(!checkTel)
e.preventDefault();
}
}조건이 맞지 않을 때(false 일때)는 제출을 하지 않도록 preventDefault 이용한다. 이것은 해당 동작을 하지 않도록 하는 것이다.
'WEB > JavaScript' 카테고리의 다른 글
| 자바스크립트 - this (0) | 2022.10.24 |
|---|---|
| DOM(문서 객체 모델) / DOM 선택, 조작 (0) | 2022.10.24 |
| JSON : 데이터를 표현하기 위한 문자 기반의 표준 포맷 (0) | 2022.06.17 |
| 정규표현식, 정규식 (regular expression) (0) | 2022.06.16 |
| 자바스크립트 : classList - 클래스 확인, 추가, 제거, 변경 (0) | 2022.06.16 |