Contents
접기
회원가입 검증
- 아이디 길이는 3~5 글자 사이로 입력받는다.
- 비밀번호의 길이는 3~5글자 사이로 입력받고, 비밀번호 확인과 값이 같아야 한다.
- 이름은 입력받기만 하면 된다.
- 성별과 취미는 읽어오기만 할것
- 전화번호 : 국번은 select상자이므로 읽어오기만 하고, 나머지 번호는 반드시 숫자 8자리(입력상자 하나로)
- 정확히 모든 데이터를 입력하면 경고창에 결과를 출력하시오 ( 모든 정보와 결과는 경고창으로 )
html 본문
회원가입 버튼을 누르면서 이벤트가 발생한다.
document.getElementById('registor').addEventListener('click', function(){
1) 아이디 , 비밀번호, 이름 검증하기
- 아이디
let userid = document.getElementById('userid');
if( userid.value.length == 0 || userid.value.length < 3 || userid.value.length > 5){
alert('아이디를 정확히 입력해주세요')
userid.select();
return;
}
- 비밀번호 & 같은지 체크
let pwd = document.getElementById('pwd');
if( pwd.value.length < 3 || pwd.value.length > 5){
alert('비밀번호를 정확히 입력해주세요')
pwd.select();
return;
}
let pwdcheck = document.getElementById('pwdcheck');
if( pwd.value.length != pwdcheck.value.length || pwd.value != pwdcheck.value){
alert('비밀번호 다시 체크해주세요')
pwdcheck.select();
return;
}
- 이름
let name = document.getElementById('name');
if(name.value.length == 0) {
alert('이름을 입력하세요');
name.select();
return;
}
2 -1 ) 성별
let gender = document.querySelector('.gender:checked');
2 - 2 ) 취미
querySeletorAll은 배열로 값을 읽어온다.
여러 값을 선택했다면 그 값을 전부 가져와야 하므로 for문을 돌린다.
let hobby = document.querySelectorAll('.hobby:checked');
let hobbyTemp = '';
for(let i = 0; i < hobby.length; i++){
hobbyTemp += hobby[i].value + ' ';
}
/*
if(hobbyTemp.length == 0){
hobbyTemp = '해당되지 않습니다.';
}
*/
3) 전화번호
local 은 010, 032 와 같은 앞 번호를 따로 받은 것이다.
let local = document.getElementById('local');
let number = document.getElementById('phoneNumber');
if (number.value.length != 8) {
alert('전화번호를 정확히 입력해주세요');
return;
}
local = local.value;
number = phoneNumber.value;
let phone = `${local + number}`;
4) 결과 : 경고창으로 가입정보 반환
document.getElementById('joinForm').reset(); 을 사용하여 정상적으로 반환하면 적힌 정보들을 지운다.
let result = `가입정보는 아래와 같습니다.
아이디 : ${userid.value}
비밀번호 : ${pwd.value}
이름 : ${name.value}
성별 : ${gender.value}
취미 : ${hobbyTemp}
전화번호 : ${phone}`
alert(result);
document.getElementById('joinForm').reset();
});
** 사용하기 위해서는 적힌 정보들이 form 태그 안에 있어야 한다.
<form id="joinForm" action="" method="post">
<table border="1" >
<h2>회원 가입</h2>
<tbody style="text-align: left;">
....
</tbody>
</table>
</form>
확인을 위해 정보를 따로 감춰놓지는 않았다.

취소 버튼을 눌렀다면?
document.getElementById('clear').addEventListener('click', function(){
document.getElementById('joinForm').reset();
/*
let userid = document.getElementById('userid');
let pwd = document.getElementById('pwd');
let pwdcheck = document.getElementById('pwdcheck');
let name = document.getElementById('name');
let number = document.getElementById('phoneNumber');
userid.value = '';
pwd.value = '';
pwdcheck.value = '';
name.value = '';
number.value = '';
*/
})
'풀스택 개발 학습 과정 > 프론트엔드' 카테고리의 다른 글
[자바스크립트] Node , 고객관리 프로그램 예제 (0) | 2024.03.09 |
---|---|
[자바스크립트] classList, 예제- 다크모드 버튼 구현 (0) | 2024.03.09 |
[자바스크립트] 함수 - 4 (수학관련 함수) (0) | 2024.03.09 |
[자바스크립트] 함수 - 5 (BOM, DOM, DOM 예제) (0) | 2024.03.04 |