ITWILL : js로 간단한 회원가입페이지 작성하기

ITWILL학원 : 12강 JS기초 BY 정규태강사

이때까지 배웠던 내용을 가지고 회원가입페이지를 작성해보자

회원가입페이지에서 구현해볼 기능.
1. 모든정보입력시 회원가입가능
2. 각항목의 입력값이 없을 경우 해당 요소의 알림과 함께 포커싱
3. id는 최소 4자리에서 최대10자리만 허용
4. 비밀번호확인시 두개의 값이 같은 경우 회원가입가능, 다른경우 비밀번호 확인창에 포커싱 후 경고창띄우기
5. 주민번호를 입력받으면 성별자동체크
6. 취미 선택안된경우 1번 옵션 선택
7. 과목 선택안된경우 경고창

<form action="itwill.com" name="fr" method="get" onsubmit="return checkall();">
	<table border="1">
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id" minlength="4" maxlength="10"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="pw"></td>
		</tr>
		<tr>
			<td>비밀번호 확인</td>
			<td><input type="password" name="repw"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name"></td>
		</tr>
		<tr>
			<td>주민번호</td>
			<td><input type="text" name="idnum1" maxlength="6"> - <input type="password" name="idnum2" maxlength="7"></td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="radio" name="gender" value="여">여
				<input type="radio" name="gender" value="남">남
			</td>
		</tr>
		<tr>
			<td>취미</td>
			<td>
				<input type="checkbox" name="hobby" value="reading">독서
				<input type="checkbox" name="hobby" value="swmming">수영
				<input type="checkbox" name="hobby" value="breathing">침대에서숨쉬기
			</td>
		</tr>
		<tr>
			<td>좋아하는 과목</td>
			<td>
				<select name="sel">
					<option value="">선택</option>
					<option value="자바">JAVA</option>
					<option value="js">JavaScript</option>
					<option value="db">DataBase</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>하고싶은 말</td>
			<td><textarea rows="5" cols="30" placeholder ="자유롭게 입력하세요" name="txt"></textarea></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="제출">
				<input type="reset" value="초기화">
			</td>
		</tr>
	</table>
</form>

위는 html태그이고 아래는 js태그이다

<script type="text/javascript">

function checkall(){ //데이터유효성체크
	let id = document.fr.id.value
	let pw = document.fr.pw.value
	let repw = document.fr.repw.value
	let name = document.fr.name.value
	let idnum1 = document.fr.idnum1.value
	let idnum2 = document.fr.idnum2.value
	let womyn = document.fr.gender[0]
	let men = document.fr.gender[1]

	if(id == ""){
		alert("아이디를 입력하세요")
		document.fr.id.focus();
		return false;
	}

	if(pw == ""){
		alert("비밀번호를 입력하세요")
		document.fr.pw.focus();
		return false;
	}

	if(pw != repw){
		alert("비밀번호가 일치하지않습니다.")
		document.fr.repw.select();
		return false;
	}

	if(name == ""){
		alert("이름을 입력하세요.")
		document.fr.name.select();
		return false;
	}

	if(idnum1 == ""){
		alert("주민번호를 입력하세요.")
		document.fr.idnum1.focus();
		return false;
	}

	if(idnum2 == ""){
		alert("주민번호를 입력하세요.")
		document.fr.idnum2.focus();
		return false;
	}

	if(womyn.checked == false && men.checked == false){
		if(idnum2.charAt(0) == 2 || idnum2.charAt(0) == 4){
		womyn.checked = true;
		return false;
		}

		if(idnum2.charAt(0) == 1 || idnum2.charAt(0) == 3){
		men.checked = true;
		return false;
		}
	}

	if(document.fr.hobby[0].checked == false 
			&& document.fr.hobby[1].checked == false
			&& document.fr.hobby[2].checked == false){
		alert("취미를 선택하세요");
		//document.fr.hobby[0].focus(); //사용자의 입력을 기다림
		document.fr.hobby[0].checked == true; //사용자입력안할시 자동으로 0번을 선택함
	}

	if(document.fr.sel.selectedIndex == 0){
		alert("과목을 선택하세요")
		document.fr.sel.focus();
		return false;
	}

	if(document.fr.txt.value == ""){
		alert("메모를 입력하세요");
		document.fr.txt.focus();
		return false;
	}

}
</script>