상세 컨텐츠

본문 제목

[Day3] homework

HTML5&CSS3&JS

by yeongs 2020. 10. 15. 09:29

본문

Day1에서 회원가입 형식을 만들어 보았다. 여기에 빈칸 입력체크나 자릿수 체크 기능을 javascript로 구현해 보았다.

1 : Alert형 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script>
	function CheckForm() {
		if(document.getElementById("userId").value == "")
		{
			alert("아이디를 입력해주세요.");
			document.getElementById("userId").focus();
			return false; // 해줘야 반복 호출 가능@!@!
		}
		
		var userPwd =document.getElementById("userPwd").value;
		if( userPwd == "")
		{
			alert("비밀번호를 입력해주세요.");
			document.getElementById("userPwd").focus();
			return false; // 해줘야 반복 호출 가능@!@!
		}
		var userPwdCheck = document.getElementById("userPwdCheck").value;
		if(userPwdCheck == "")
		{
			alert("비밀번호확인를 입력해주세요.");
			document.getElementById("userPwdCheck").focus();
			return false; // 해줘야 반복 호출 가능@!@!
		}
		if (userPwd != userPwdCheck)
		{
			alert("입력한 비밀번호가 다릅니다.");
			document.getElementById("userPwd").focus();
			return false; // 해줘야 반복 호출 가능@!@!
		}

		var user_Birth = document.getElementById("userBirth").value;
		if( user_Birth == ""){
			alert("생년월일을 입력해주세요.");
			document.getElementById("userBirth").focus();
			return false;
		}
		if (user_Birth.length != 8 )
		{
			alert("생년월일은 8자리입니다.");
			document.getElementById("userBirth").focus();
			return false;
		}

		
		var userNum2 = document.getElementById("userNum2").value;
		if( userNum2 == ""){
			alert("전화번호 2번째칸을 입력해주세요.");
			document.getElementById("userNum2").focus();
			return false;
		}
		
		if (userNum2.length != 4 )
		{
			alert("입력은 4자리입니다.");
			document.getElementById("userNum2").focus();
			return false;
		}
		
		var userNum3 = document.getElementById("userNum3").value;
		if( userNum3 == ""){
			alert("전화번호 3번째칸을 입력해주세요.");
			document.getElementById("userNum3").focus();
			return false;
		}
		if (userNum3.length != 4 )
		{
			alert("입력은 4자리입니다.");
			document.getElementById("userNum3").focus();
			return false;
		}
		
		if(document.getElementById("userOffice").value == ""){
			alert("회사를 입력해주세요.");
			document.getElementById("userOffice").focus();
			return false;
		}
		if(document.getElementById("userJobPosition").value == ""){
			alert("직책을 입력해주세요.");
			document.getElementById("userJobPosition").focus();
			return false;
		}
		
		var rdo_carsoyou = document.getElementsByName("carsoyou");
		var count = 0;
		for(i = 0; i < rdo_carsoyou.length; i++){
			if (rdo_carsoyou[i].checked == true){
				count+= 1;				
			}
		}	
		if (count == 0)
		{
			alert("차량 유무를 선택해주세요");
			return false;
		}

		var rdo_hobby = document.getElementsByName("hobby");
		var count = 0;
		for(i = 0; i < rdo_hobby.length; i++){
			if (rdo_hobby[i].checked == true){
				count+= 1;				
			}
		}	
		if (count == 0 )
		{
			alert("취미를 체크해주세요");
			return false;
		}
	}
	

</script>
<style>
/*
	section
	{
		text-align: center; // 중앙정렬
	}
*/
</style>
</head>
<body>
	<section>

		<form>
		<fieldset class ="field" style="width:50%">
		<table>
			<tr>
				<th colspan="2">회원가입</td>
			</tr>
			<tr>
				<td>아이디(*)</td><td><input type="text" id = userId></td>
			</tr>
			<tr>
				<td>비밀번호(*)</td><td><input type="password" id = userPwd></td>
			</tr>
			<tr>
				<td>비밀번호확인(*)</td><td><input type="password" id = userPwdCheck></td>
			</tr>
			<tr>
				<td>생년월일(*)</td><td><input type=text id = userBirth maxlength="8" placeholder="ex)19910101"></td>
			</tr>
			<tr>
				<td>전화번호(*)</td>
				<td><select class = userNum name = userNum1>
					<option value ="0"> 010</option>
					<option value ="1"> 011</option>
					<option value ="2"> 016</option>
					<option value ="3"> 017</option>
					
					</select>
					- <input class = userNum type=text id = userNum2 maxlength="4" placeholder="0000"> -
					<input class = userNum type=text id = userNum3 maxlength="4" placeholder="0000">
				</td>
				
			</tr>
			<tr>
				<td>직업(*)</td>
				<td>
					회사 <input class = userjob type=text id = userOffice> 
					직책 <input class = userjob type=text id = userJobPosition> 
				</td>
			</tr>
			<tr>
				<td>차량소유유무(*)</td>
				<td><input type="radio" name = carsoyou >유
					<input type="radio" name = carsoyou >무
				</td>
			</tr>
			
			<tr>
				<td>취미(*)</td>
				<td>
					<input type = "checkbox" name = "hobby" value="boxing" checked>복싱
					<input type = "checkbox" name = "hobby" value="tabletenis">탁구
					<input type = "checkbox" name = "hobby" value="soccer">축구
				</td>
			</tr>
			<tr>
				<td colspan = "2">
					<input type = "button" value ="등록" onclick="CheckForm();">
					<input type = "reset" value ="초기화">
				</td>
			</tr>
		</table>
		</fieldset>
		</form>
	</section>
</body>
</html>

2: Span 태그 이용 경고문구 (HTML /CSS /Javascipt 따로 구분해서 구현)

HTML 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script type="text/javascript" src="homework2.js"></script>
<style>
</style>
<link type="text/css" rel="stylesheet" href="homework2.css"></link>
</head>
<body>
	<section>

		<form>
		<fieldset class ="field" style="width:50%">
		<table>
			<tr>
				<th colspan="2">회원가입</td>
			</tr>
			<tr>
				<td>아이디(*)</td><td><input type="text" id = userId></td>
			</tr>
			<tr>
				<td>비밀번호(*)</td><td><input type="password" id = userPwd></td>
			</tr>
			<tr>
				<td>비밀번호확인(*)</td><td><input type="password" id = userPwdCheck></td>
			</tr>
			<tr>
				<td>생년월일(*)</td><td><input type=text id = userBirth maxlength="8" placeholder="ex)19910101"></td>
			</tr>
			<tr>
				<td>전화번호(*)</td>
				<td><select class = userNum name = userNum1>
					<option value ="0"> 010</option>
					<option value ="1"> 011</option>
					<option value ="2"> 016</option>
					<option value ="3"> 017</option>
					
					</select>
					- <input class = userNum type=text id = userNum2 maxlength="4" placeholder="0000"> -
					<input class = userNum type=text id = userNum3 maxlength="4" placeholder="0000">
				</td>
				
			</tr>
			<tr>
				<td>직업(*)</td>
				<td>
					회사 <input class = userjob type=text id = userOffice> 
					직책 <input class = userjob type=text id = userJobPosition> 
				</td>
			</tr>
			<tr>
				<td>차량소유유무(*)</td>
				<td><input type="radio" name = carsoyou >유
					<input type="radio" name = carsoyou >무
				</td>
			</tr>
			
			<tr>
				<td>취미(*)</td>
				<td>
					<input type = "checkbox" name = "hobby" value="boxing" checked>복싱
					<input type = "checkbox" name = "hobby" value="tabletenis">탁구
					<input type = "checkbox" name = "hobby" value="soccer">축구
				</td>
			</tr>
			<tr>
				<td colspan = "2">
					<input type = "button" value ="등록" onclick="CheckForm();">
					<input type = "reset" value ="초기화">
				</td>
			</tr>
		</table>
		&nbsp;&nbsp;<span id="Msg"></span>
		</fieldset>
		</form>
	</section>
</body>
</html>

CSS 코드 :

@charset "UTF-8";

#Msg
{
	color : red;
}

homework.html
0.00MB
homework2.css
0.00MB
homework2.html
0.00MB
homework2.js
0.00MB

Javascipt 코드 :

/**
 * 
 */
function CheckForm() {
	if(document.getElementById("userId").value == "")
	{
		document.getElementById("Msg").innerText = "아이디를 입력해주세요.";
		document.getElementById("userId").focus();
		return false; // 해줘야 반복 호출 가능@!@!
	}
	
	var userPwd =document.getElementById("userPwd").value;
	if( userPwd == "")
	{
		document.getElementById("Msg").innerText = "비밀번호를 입력해주세요.";
		document.getElementById("userPwd").focus();
		return false; // 해줘야 반복 호출 가능@!@!
	}
	var userPwdCheck = document.getElementById("userPwdCheck").value;
	if(userPwdCheck == "")
	{
		document.getElementById("Msg").innerText = "비밀번호확인를 입력해주세요.";
		document.getElementById("userPwdCheck").focus();
		return false; // 해줘야 반복 호출 가능@!@!
	}
	if (userPwd != userPwdCheck)
	{
		document.getElementById("Msg").innerText = "입력한 비밀번호가 다릅니다.";
		document.getElementById("userPwd").focus();
		return false; // 해줘야 반복 호출 가능@!@!
	}

	var user_Birth = document.getElementById("userBirth").value;
	if( user_Birth == ""){
		document.getElementById("Msg").innerText = "생년월일을 입력해주세요.";
		document.getElementById("userBirth").focus();
		return false;
	}
	if (user_Birth.length != 8 )
	{
		document.getElementById("Msg").innerText = "생년월일은 8자리입니다.";
		document.getElementById("userBirth").focus();
		return false;
	}

	
	var userNum2 = document.getElementById("userNum2").value;
	if( userNum2 == ""){
		document.getElementById("Msg").innerText = "전화번호 2번째칸을 입력해주세요.";
		document.getElementById("userNum2").focus();
		return false;
	}
	
	if (userNum2.length != 4 )
	{
		document.getElementById("Msg").innerText = "입력은 4자리입니다.";
		document.getElementById("userNum2").focus();
		return false;
	}
	
	var userNum3 = document.getElementById("userNum3").value;
	if( userNum3 == ""){
		document.getElementById("Msg").innerText = "전화번호 3번째칸을 입력해주세요.";
		document.getElementById("userNum3").focus();
		return false;
	}
	if (userNum3.length != 4 )
	{
		document.getElementById("Msg").innerText = "입력은 4자리입니다.";
		document.getElementById("userNum3").focus();
		return false;
	}
	
	if(document.getElementById("userOffice").value == ""){
		document.getElementById("Msg").innerText = "회사를 입력해주세요.";
		document.getElementById("userOffice").focus();
		return false;
	}
	if(document.getElementById("userJobPosition").value == ""){
		document.getElementById("Msg").innerText = "직책을 입력해주세요.";
		document.getElementById("userJobPosition").focus();
		return false;
	}
	
	var rdo_carsoyou = document.getElementsByName("carsoyou");
	var count = 0;
	for(i = 0; i < rdo_carsoyou.length; i++){
		if (rdo_carsoyou[i].checked == true){
			count+= 1;				
		}
	}	
	if (count == 0)
	{
		document.getElementById("Msg").innerText = "차량 유무를 선택해주세요";
		return false;
	}

	var rdo_hobby = document.getElementsByName("hobby");
	var count = 0;
	for(i = 0; i < rdo_hobby.length; i++){
		if (rdo_hobby[i].checked == true){
			count+= 1;				
		}
	}	
	if (count == 0 )
	{
		document.getElementById("Msg").innerText = "취미를 체크해주세요";
		return false;
	}
}

'HTML5&CSS3&JS' 카테고리의 다른 글

[Day4] homework  (0) 2020.10.16
[Day2] homework  (0) 2020.10.14
[Day1] homework  (0) 2020.10.14
HTML 및 CSS 적용 쉽게 확인하기  (0) 2020.10.14

관련글 더보기

댓글 영역

티스토리툴바