final_exam

Mia Lee·2021년 12월 7일
JavaScript자바스크립트
0

Java Script

목록 보기
25/25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// submit 작업 수행을 위한 판별 작업에 사용할 전역변수 선언
	var isCheckDuplicateId = false; // ID 중복확인 체크 변수
	var isCheckConfirmPasswd = false; // 패스워드 확인 체크 변수
	
	// 1. ID 중복확인 버튼 클릭 시 새 창 띄우기
	// (가로 : 300, 세로 : 200, 표시할 페이지 : check_id.html)
	function checkDuplicateId() {
		window.open("check_id.html","check","width=300,height=200");
		
		document.getElementById("checkIdResult").innerHTML = "중복확인완료";
		
		// 실제 중복확인 작업 대신 버튼 클릭 시 임시로 전역변수값을 true 로 변경
		isCheckDuplicateId = true;
	}
	
	// "비밀번호확인" 입력창에 비밀번호 입력할 때마다 "비밀번호" 입력창의 입력 내용과 비교하여
    // 비교 결과를 "비밀번호확인" 입력창 우측 span 태그(id "confirmPasswdResult") 영역 내에 출력하기
	function checkConfirmPasswd(confirmPasswd) {
		// span 태그를 객체로 가져오기
		var span_passwd = document.getElementById("confirmPasswdResult");
		
		// 기존 패스워드 입력란에 입력된 패스워드 가져오기
		var passwd = document.fr.passwd.value;
		
		if(passwd == confirmPasswd) { // 패스워드 일치 시
			span_passwd.innerHTML = "패스워드 일치";
			span_passwd.style.color = "GREEN";
			
			// 패스워드가 일치하면 isCheckConfirmPasswd 변수값을 true 로 변경
			isCheckConfirmPasswd = true;
		} else { // 패스워드 불일치 시
			span_passwd.innerHTML = "패스워드 불일치";
			span_passwd.style.color = "RED";
			
			// 패스워드가 불일치하면 isCheckConfirmPasswd 변수값을 false 로 변경
			isCheckConfirmPasswd = false;
		}
	}
	
	// 3. 주민번호 앞자리에 숫자 6자리 입력되면 주민번호 뒷자리 입력란으로 커서 이동하기(포커스 요청)
	function checkJumin1(jumin1) { // 주민번호 앞자리 입력값(this.value) 전달받기
		if(jumin1.length == 6) { // 입력된 번호가 6자리일 경우
			// jumin2 로 커서 요청
			document.fr.jumin2.focus();
		}
	}
	
	// 4. 주민번호 뒷자리에 숫자 7자리 입력되면 주민번호 뒷자리 입력란에서 커서 빼기(포커스 해제)
	function checkJumin2(jumin2Length) { // 주민번호 뒷자리 입력값의 길이(this.value.length) 전달받기
		if(jumin2Length == 7) { // 입력된 번호가 7자리일 경우
			// jumin2 커서 해제
			document.fr.jumin2.blur();
		}
	}
	
	// 5. 이메일 도메인 선택 셀렉트 박스 항목 변경 시 해당 값을 이메일 두번째 항목(email2)에 표시하기
    // 단, 직접입력 선택 시 표시된 도메인 삭제하기
	function selectDomain(domain) {
		document.fr.email2.value = domain; // email2 항목에 선택된 도메인 표시
		
		// 직접입력 선택 시 편집 가능하도록 활성화하고, 나머지의 경우 편집 불가능하도록 비활성화
		if(domain.length == 0) {
			document.fr.email2.disabled = false;
		} else {
			document.fr.email2.disabled = true;
		}
	}
    
    // 6. 취미의 "전체선택" 체크박스 체크 시 취미 항목 모두 체크, "전체선택" 해제 시 취미 항목 모두 체크 해제하기
    function checkAll(isChecked) {
		if(isChecked) { // 전체선택 체크 시
			document.fr.hobby[0].checked = true;
			document.fr.hobby[1].checked = true;
			document.fr.hobby[2].checked = true;
		} else {  // 전체선택 체크 해제 시
			document.fr.hobby[0].checked = false;
			document.fr.hobby[1].checked = false;
			document.fr.hobby[2].checked = false;
		}
    }
    
    /*
    submit 버튼 클릭 시 필수 조건들이 만족할 경우에만 다음 페이지로 이동하기(submit())
    - 아이디 중복 확인 버튼을 통해 아이디 중복 확인을 수행하고(버튼 클릭으로 대체(임시))
    - 비밀번호와 비밀번호확인 두 개가 일치하고
    - 주민번호 앞자리와 뒷자리가 모두 정상적으로 입력되고
    - 이메일이 정상적으로 입력됐을 경우
    => 위의 모든 조건이 만족할 경우 true 리턴하여 submit 작업을 수행하고
       아니면, false 를 리턴하여 submit 작업을 취소
    => 단, 현재 메서드에서 다른 작업의 수행여부를 확인하려면
       해당 작업 수행 후 전역변수를 사용하여 값을 변경해 놓아야함
    */
    function checkForm() {
    	// 아이디와 비밀번호는 전역변수 값을 확인하고
    	// 주민번호와 이메일은 해당 입력값의 길이 확인
    	if(!isCheckDuplicateId) { // 아이디 중복확인을 수행하지 않았을 경우
    		alert("아이디 중복확인 필수!");
    		document.fr.btnCheckId.focus();
    		// 더 이상 작업이 진행되지 않고, submit 동작을 취소하기 위해 false 값 리턴
    		return false;
    	} else if(!isCheckConfirmPasswd) { // 비밀번호 확인 작업이 실패 시(불일치)
    		alert("비밀번호 확인 필수!");
    		document.fr.passwd2.focus();
    		return false;
    	} else if(document.fr.jumin1.value.length != 6) {
    		alert("주민번호 앞자리 6자리 필수!");
    		document.fr.jumin1.focus();
    		return false;
    	} else if(document.fr.jumin2.value.length != 7) {
    		alert("주민번호 뒷자리 7자리 필수!");
    		document.fr.jumin2.focus();
    		return false;
    	} else if(document.fr.email1.value.length == 0) { // email1 입력값의 길이가 0일 경우
    		alert("이메일 계정 입력 필수!");
    		document.fr.email1.focus();
    		return false;
    	} else if(document.fr.email2.value.length == 0) {  // email2 입력값의 길이가 0일 경우
    		alert("이메일 도메인 입력 필수!");
    		document.fr.email2.focus();
    		return false;
    	}
    	
    	// 별도로 리턴값을 리턴하지 않으면 자동으로 true 값이 리턴되므로 submit 기능 동작됨
//     	return true; // 생략 가능
    }
</script>
</head>
<body>
	<h1>final_exam 의 회원가입 페이지</h1>
	<h1>회원가입</h1>
	<form action="a.jsp" method="get" name="fr" onsubmit="return checkForm()">
		<table border="1">
			<tr><td>이름</td><td><input type="text" name="name" required="required"></td></tr>
			<tr>
				<td>ID</td>
				<td>
					<input type="text" name="id" placeholder="4 ~ 8글자 사이 입력" required="required">
					<input type="button" value="ID중복확인" id="btnCheckId" onclick="checkDuplicateId()">
					<span id="checkIdResult"></span>
				</td>
			</tr>
			<tr><td>비밀번호</td><td><input type="password" name="passwd" placeholder="8 ~ 16글자 사이 입력" required="required"></td></tr>
			<tr>
				<td>비밀번호확인</td>
				<td>
					<input type="password" name="passwd2" onkeyup="checkConfirmPasswd(this.value)" required="required">
					<span id="confirmPasswdResult"></span>
				</td>
			</tr>
			<tr>
				<td>주민번호</td>
				<td>
					<input type="text" name="jumin1" onkeyup="checkJumin1(this.value)" required="required"> -
					<input type="text" name="jumin2" onkeyup="checkJumin2(this.value.length)" required="required">
				</td>
			</tr>
			<tr>
				<td>E-Mail</td>
				<td>
					<input type="text" name="email1" required="required">@
					<input type="text" name="email2" required="required">
					<select name="emailDomain" onchange="selectDomain(this.value)">
						<option value="">직접입력</option>
						<option value="naver.com">naver.com</option>
						<option value="nate.com">nate.com</option>
						<option value="daum.net">daum.net</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>직업</td>
				<td>
					<select name="job" required="required">
						<option value="">항목을 선택하세요</option>
						<option value="개발자">개발자</option>
						<option value="DB엔지니어">DB엔지니어</option>
						<option value="관리자">관리자</option>
						<option value="기타">기타</option>
					</select>
				</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="여행">여행
					<input type="checkbox" name="hobby" value="독서">독서
					<input type="checkbox" name="hobby" value="게임">게임
					<input type="checkbox" name="check_all" value="전체선택" 
														onchange="checkAll(this.checked)">전체선택
				</td>
			</tr>
			<tr>
				<td>가입동기</td>
				<td><textarea name="content" cols="40" rows="10"></textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="가입">
					<input type="reset" value="초기화">
					<input type="button" value="돌아가기">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
profile
Mia Lee
이전 포스트

체크박스

0개의 댓글