회원가입 페이지 구현하기
[Javascript] 구현할 내용
1. 핸드폰 번호 기입 시 자동으로 다음 칸 넘어가기
2. 핸드폰 번호 전체 기입 시 인증번호 전송 버튼 활성화시키기 / 토큰 생성 후 화면 표출 / 3분 타이머 시작 / 인증완료 버튼 활성화
3. 3분 이내 클릭 시 '인증 완료' alert 창 생성 / 3분 지나면 전체 초기화
4. 가입하기 버튼 클릭 시 전체 유효성 검사(오류 메시지 표출)
5. 검증 완료 후 가입 축하 메시지 alert 창 생성
1. 핸드폰 번호 기입 시 자동으로 다음 칸 넘어가기
1) 핸드폰 번호 칸 [3자리]-[4자리]-[4자리]
2) 핸드폰 번호를 담는 변수
3) input 안의 value값을 확인해서 자릿수 조건을 만족하면 다음 칸으로 이동
<html>
- 각 칸의 숫자의 길이를 maxlength를 이용하여 제한해 둠 : [3자리]-[4자리]-[4자리]
- 인증번호 전송 버튼 disabled 처리
<!-- 2. 핸드폰번호, 인증번호 전송, 인증 완료 -->
<div class="phone__group">
<div class="phone__number">
<div class="phone__number__box">
<input id="phoneNum1" type="text" maxlength="3" oninput="phoneNum1()" /> -
<input id="phoneNum2" type="text" maxlength="4" oninput="phoneNum2()" /> -
<input id="phoneNum3" type="text" maxlength="4" oninput="phoneNum3()" />
</div>
<button id="tokenBtn" class="btn__disabled__stroke" disabled onclick="getToken()">인증번호</button>
</div>
<div class="phone__timer">
<div class="timer__token">
<span id="token" class="token">000000</span>
<span id="timer" class="timer">3:00</span>
</div>
<button id="tokenConfrimBtn" class="btn__disabled__stroke" disabled onclick="confrimPopup()">인증 완료</button>
</div>
</div><javascript>
- 변수 만들기 : phoneNum1, phoneNum2, PhoneNum3
- input 안의 value 값 확인하기
- 조건문 생성(value의 length가 '(지정된 수)'와 일치)
- 조건이 맞으면 다음 칸으로 focus
- [3자리]-[4자리]-[4자리] 조건 성립 시 인증번호 버튼 활성화시키기 (인증번호 전송 버튼 disabled 해제)
let phoneNum1 = () => {
let phoneNum1 = document.getElementById('phoneNum1').value;
if (phoneNum1.length === 3) {
document.getElementById('phoneNum2').focus();
}
};
let phoneNum2 = () => {
let phoneNum2 = document.getElementById('phoneNum2').value;
if (phoneNum2.length === 4) {
document.getElementById('phoneNum3').focus();
}
};
let phoneNum3 = () => {
let phoneNum1 = document.getElementById('phoneNum1').value;
let phoneNum2 = document.getElementById('phoneNum2').value;
let phoneNum3 = document.getElementById('phoneNum3').value;
if (phoneNum1.length === 3 && phoneNum2.length === 4 && phoneNum3.length === 4) {
// 인증번호 버튼 active
document.getElementById('tokenBtn').removeAttribute('disabled');
document.getElementById('tokenBtn').className = 'btn__stroke';
}
};2. 핸드폰 번호 전체 기입 시 인증번호 전송 버튼 활성화 / 토큰 생성 / 3분 타이머 / 인증 완료 버튼 활성화
1) 인증번호 버튼 활성화
2) 인증번호 버튼 클릭 시 토큰 생성 & 인증번호 버튼 비활성화
3) 3분 타이머 스타트
4) 인증 완료 버튼 활성화
<javascript>
- 토큰 생성하는 함수 : getToken()
const getToken = () => {
let token = String(Math.floor(Math.random() * 1000000)).padStart(6, '0');
document.getElementById('token').innerText = token;
document.getElementById('token').style.color = '#000';
// 1. 토큰 받은 후 다시 인증번호 전송 버튼 disabled 변경
document.getElementById('tokenBtn').setAttribute('disabled', 'true');
document.getElementById('tokenBtn').className = 'btn__disabled__stroke';
// 2. 인증 완료 버튼 active 변경
document.getElementById('tokenConfrimBtn').removeAttribute('disabled');
document.getElementById('tokenConfrimBtn').className = 'btn__fill';
// 3. 3분 타이머 시작
timer();
};- 3분 타이머 : timer()
- setInterval(), clearInterval()
* 3분 타임아웃 됐을 때 전체 초기화 작업 필요! (토큰, 버튼, 타이머 초기화)
let interval;
const timer = () => {
let time = 180;
interval = setInterval(() => {
let min = Math.floor(time / 60);
let sec = String(time % 60).padStart(2, '0');
document.getElementById('timer').innerText = `${min}:${sec}`;
if (time >= 0) {
time--;
} else {
// 타임 아웃 됐을 때 다시 전체 초기화 상태
// 1) token 초기화
document.getElementById('token').innerText = '000000';
document.getElementById('token').style.color = '#999999';
// 2) 인증완료 버튼 disabled
document.getElementById('tokenConfrimBtn').setAttribute('disabled', 'true');
document.getElementById('tokenConfrimBtn').className = 'btn__disabled__stroke';
// 3) timer 초기화
document.getElementById('timer').innerText = '3:00';
clearInterval(interval);
}
}, 1000);
};3. 3분 이내 클릭 시 '인증 완료' alert 창 생성 / 3분 지나면 전체 초기화
1) 인증 완료 버튼 클릭
2) 인증 완료 버튼 disabled
3) 인증 완료 안내 alert창 띄우기
4) 가입하기 버튼 활성화
<javascript>
- timer 중지 : clearInterval()
- alert()
const confrimPopup = () => {
clearInterval(interval);
// 1) 인증완료 버튼 disabled
document.getElementById('tokenConfrimBtn').setAttribute('disabled', 'true');
document.getElementById('tokenConfrimBtn').className = 'btn__disabled__stroke';
// 2) 완료 팝업 띄우기
alert('인증이 완료되었습니다!!!');
// 3) 가입하기 버튼 active
document.getElementById('SignupBtn').removeAttribute('disabled');
document.getElementById('SignupBtn').className = 'btn__active';
};4. 가입하기 버튼 클릭 시 전체 유효성 검사(오류 메시지 표출)
1) 받아오는 값들 변수로 저장
2) value 값이 비어있는지 확인
3) 비어있거나 형식이 올바르지 않으면 에러 문구 표출
<javascript>
- 유효성 검사 : 이름, 이메일, 패스워드1, 패스워드2, 패스워드 일치 확인, 지역 선택
- 이메일 : includes() 사용해서 '@' 포함되어 있는지 확인
- 패스워드 1, 패스워드2 일치하는지 확인
const signup = () => {
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let password1 = document.getElementById('password1').value;
let password2 = document.getElementById('password2').value;
let location = document.getElementById('location').value;
let isValid = true;
// 유효성 검사 - 이름
if (name === '') {
isValid = false;
document.getElementById('error__name').innerText = '이름이 올바르지 않습니다.';
document.getElementById('error__name').style.display = 'block';
} else {
document.getElementById('error__name').innerText = '';
document.getElementById('error__name').style.display = 'none';
}
// 유효성 검사 - 이메일
if (email.includes('@') === false) {
isValid = false;
document.getElementById('error__email').innerText = '올바른 이메일 형식이 아닙니다.';
document.getElementById('error__email').style.display = 'block';
} else {
document.getElementById('error__email').innerText = '';
document.getElementById('error__email').style.display = 'none';
}
// 유효성 검사 - 패스워드 1
if (password1 === '') {
isValid = false;
document.getElementById('error__password1').innerText = '비밀번호를 입력해 주세요.';
document.getElementById('error__password1').style.display = 'block';
} else {
document.getElementById('error__password1').innerText = '';
document.getElementById('error__password1').style.display = 'none';
}
// 유효성 검사 - 패스워드 2
if (password2 === '') {
isValid = false;
document.getElementById('error__password2').innerText = '비밀번호를 입력해 주세요.';
document.getElementById('error__password2').style.display = 'block';
} else {
document.getElementById('error__password2').innerText = '';
document.getElementById('error__password2').style.display = 'none';
}
// 유효성 검사 - 패스워드 1 = 패스워드 2
if (password1 !== password2) {
isValid = false;
document.getElementById('error__password1').innerText = '비밀번호가 일치하지 않습니다.';
document.getElementById('error__password1').style.display = 'block';
document.getElementById('error__password2').innerText = '비밀번호가 일치하지 않습니다.';
document.getElementById('error__password2').style.display = 'block';
}
// 유효성 검사 - 지역선택
if (location !== '서울' && location !== '인천' && location !== '경기') {
isValid = false;
document.getElementById('error__location').innerText = '지역을 선택해 주세요.';
document.getElementById('error__location').style.display = 'block';
} else {
document.getElementById('error__location').innerText = '';
document.getElementById('error__location').style.display = 'none';
}
// 올바르게 작성된 경우 - 가입완료!!!
if (isValid === true) {
alert('가입을 환영합니다!');
}
};5. 검증 완료 후 가입 축하 메시지 alert 창 생성
1) 검증 완료되면 가입 축하 alert 생성
