Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

[8주차] 34. javascript로 회원가입 form 유효성 검사하기 본문

K-DigitalTraining 강의/6. Javascript(웹표준)

[8주차] 34. javascript로 회원가입 form 유효성 검사하기

이대곤 2022. 7. 9. 17:12

회원가입 폼 유효성검사

* 전송 전에 유효성 검사를 해주려면 <input type="submit"> 버튼에 onClick 속성을 추가해 유효성을 검사하는 함수를
   호출하고, 그 함수의 리턴값에 따라 form 요소의 action 속성에 명시된 url로 이동할 수 있게 해야한다.   

   onClick="return 함수명()"

핵심1. <input type="text"> 요소에 대한 유효성 검사

사용자가 요소에 값을 입력하지 않은 경우 false를 return 하게 해야하는데,

사용자가 입력한 값을 가져올 땐 DOM을 이용해 입력된 value를 가져오고 이 값의 길이를 비교한다.

if(myform.id.value.length == 0){ // myform.id.value == "" 이것도 가능
	alert("아이디가 누락됐습니다.");
	myform.id.focus(); // 포커스를 이동시켜 바로 아이디를 입력할 수 있게
	return false;
}

핵심2. email 입력칸에서의 유효성 검사

사용자가 이메일의 값으로 '@' 를 포함하지 않은 경우 false를 return 하게 해야하는데,

이는 value의 indexOf 연산을 한 결과로 판단할 수 있다.

// input type이 email로 해주면 불필요한 부분. text이면 필요한 부분.
if(myform.email.value.indexOf('@') == -1){ // 존재한다면 -1이 아닌 숫자가 반환됨
	alert("이메일 형식이 아닙니다.");
	myform.email.focus(); 
	return false;
}


핵심3. <select> 선택박스 요소에 대한 유효성 검사

사용자가 선택박스의 값을 선택하지 않은경우 false를 return 하게 해야하는데,

선택한 값은 그냥 value를 통해 가져와서 확인한다.

if(myform.areacode.value == ""){
	alert("지역번호를 선택해야 합니다.");
	myform.areacode.focus(); 
	return false;
}

핵심4. 체크박스 요소에 대한 유효성 검사

사용자가 체크박스의 요소들 중 하나도 선택하지 않은 경우 false를 return 하게 해야하는데,

이는 flag로 체크된 요소가 존재하는지 확인함으로써 가능하다.

/* 좋아하는 가수 유효성 검사 */
flag = false;
for(i=0; i < myform.singer.length; i++){
	if(myform.singer[i].checked){			// 이 부분과
		str += myform.singer[i].value + "\n";  	// 이 부분도 매우 중요한 부분
		flag = true;
	}
}
			
if(flag == false){
	alert("좋아하는 가수를 최소 1개이상 선택해야 합니다.");
	return false;
}

핵심5. 라디오 요소에 대한 유효성 검사

사용자가 라디오의 요소들 중 하나도 선택하지 않은 경우 false를 return 하게 해야하는데,

이는 flag로 체크된 요소가 존재하는지 확인함으로써 가능하다.

/* 성별 유효성 검사 */
flag = false;
for(i=0; i < myform.gender.length; i++){
	if(myform.gender[i].checked){			// 이 부분과
		str += myform.gender[i].value + "\n";	// 이 부분도 매우 중요한 부분
		flag = true;
		break; // 라디오박스에서는 1개만 선택될 수 있으므로 사용가능
	}
}
			
if(flag == false){
	alert("성별을 체크가 누락됐습니다.");
	return false;
}

검증코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title> 회원 가입하기 </title>
	<script type="text/javascript">
		function idCheck(){
			if(myform.id.value == "abcd"){
				alert('중복된 아이디입니다.');
			}
			else{
				alert('사용 가능한 아이디입니다.');
			}
		} //idCheck()
		
		function check(){
			/* 아이디 유효성 검사 */
			if(myform.id.value.length == 0){ // myform.id.value == "" 이것도 가능
				alert("아이디가 누락됐습니다.");
				myform.id.focus(); // 포커스를 이동시켜 바로 아이디를 입력할 수 있게
				return false;
			}
			
			/* 비밀번호 및 비밀번호 확인 유효성 검사 */
			if(myform.password.value.length == 0){
				alert("비밀번호가 누락됐습니다.");
				myform.password.focus(); // 포커스를 이동시켜 바로 비밀번호를 입력할 수 있게
				return false;
			}
			
			if(myform.repassword.value.length == 0){
				alert("비밀번호확인이 누락됐습니다.");
				myform.repassword.focus(); 
				return false;
			}
			
			if(myform.password.value != myform.repassword.value){
				alert("비밀번호를 재확인하세요.");
				myform.repassword.select(); //이걸로 하면 focus 이동하면서 입력한게 블록으로 선택됨
				return false;
			}
			
			/* 이름 유효성 검사 */
			if(myform.name.value.length == 0){
				alert("이름이 누락됐습니다.");
				myform.name.focus(); 
				return false;
			}
			
			/* 전화번호 유효성 검사 */
			if(myform.areacode.value == ""){
				alert("지역번호를 선택해야 합니다.");
				myform.areacode.focus(); 
				return false;
			}
			
			if(myform.phone1.value.length == 0 || myform.phone2.value.length == 0){
				alert("전화번호가 누락됐습니다.");
				myform.phone1.focus(); 
				return false;
			}
			
			if(isNaN(myform.phone1.value) || isNaN(myform.phone2.value)){
				alert("전화번호는 숫자만 입력가능합니다.");
				myform.phone1.focus(); 
				return false;
			}
			
			/* 이메일 유효성 검사 */
			if(myform.email.value.length == 0){
				alert("이메일이 누락됐습니다.");
				myform.email.focus(); 
				return false;
			}
			
			// input type이 email로 해주면 불필요한 부분. text이면 필요한 부분.
			if(myform.email.value.indexOf('@') == -1){
				alert("이메일 형식이 아닙니다.");
				myform.email.focus(); 
				return false;
			}
			
			/* 지금까지 작성한 것들 한번에 출력해보기 */
			str = "지금까지 작성한 것들은 : \n";
			str += myform.id.value + "\n";
			str += myform.password.value + "\n";
			str += myform.name.value + "\n";
			str += myform.areacode.value + "\n";
			str += myform.phone1.value + "\n";
			str += myform.phone2.value + "\n";
			str += myform.email.value + "\n";
			
			
			/* 좋아하는 가수 유효성 검사 */
			flag = false;
			for(i=0; i < myform.singer.length; i++){
				if(myform.singer[i].checked){
					str += myform.singer[i].value + "\n";
					flag = true;
				}
			}
			
			if(flag == false){
				alert("좋아하는 가수를 최소 1개이상 선택해야 합니다.");
				return false;
			}
			
			/* 성별 유효성 검사 */
			flag = false;
			for(i=0; i < myform.gender.length; i++){
				if(myform.gender[i].checked){
					str += myform.gender[i].value + "\n";
					flag = true;
					break; // 라디오박스에서는 1개만 선택될 수 있으므로 사용가능
				}
			}
			
			if(flag == false){
				alert("성별을 체크가 누락됐습니다.");
				return false;
			}
			
			/* 글쓰기 유효성 검사 */
			if(myform.ta.value.length == 0){
				alert("글쓰기가 누락됐습니다.");
				return false;
			}
			
			str += myform.ta.value;
				
			alert(str);
			
		}
	</script>
</head>
<body>
<form action="result.jsp" name="myform"> 
<input type="hidden" name="myhidden" value="hidden은 안보임"> <!-- hidden 타입은 안보이며 이 코드상에서 아무 의미없음. 왜 추가돼있는지도 모르겠음 -->
<table border=1>
	<tr>
		<td>아이디</td>
		<td>
			<input type="text" id="id" size="20" maxlength="10" value="아이디 입력" >  			
			<input type="button" value="중복체크" onClick="idCheck()">  			
		</td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input type="password" name="password" size="20" maxlength="10"></td>
	</tr>
	<tr>
		<td>비밀번호 확인</td>
		<td><input type="password" name="repassword" size="20" maxlength="10"></td>
	</tr>
	<tr>
		<td>이름</td>
		<td><input type="text" name="name" size="20" maxlength="10"></td>
	</tr>
	<tr>
		<td>전화 번호</td>
		<td>
			<select name="areacode">
				<option value="" selected="selected">선택</option>
				<option value="02">02</option>
				<option value="031">031</option>
				<option value="051">051</option>
				<option value="043">043</option>
				<option value="064">064</option>
			</select>
			&nbsp;-&nbsp;
			<input type="text" name="phone1" size="4" maxlength="4">
			&nbsp;-&nbsp;
			<input type="text" name="phone2" size="4" maxlength="4">
		</td>
	</tr>	
	<tr>
		<td>주소</td>
		<td>
			<input type="text" name="address1" size="30" maxlength="30" > 
		</td>
	</tr>
	<tr>
		<td>세부 주소</td>
		<td><input type="text" name="address2" size="30" maxlength="30"></td>
	</tr>
	<tr>
		<td>email</td>
		<td><input type="text" name="email" size="30" maxlength="30"></td>
		<!-- input 타입이 email이면 @가 들어갔나 안들어갔나로 유효성 검사 알아서 해줌 --> 
	</tr>	
	<tr>
		<td>사진 올리기</td>
		<td><input type="file"></td>
	</tr>	
	<tr>
		<td>좋아하는 가수</td>
		<td>
			<input type="checkbox" name="singer" value="소녀시대">소녀시대
			<input type="checkbox" name="singer" value="방탄">방탄
			<input type="checkbox" name="singer" value="레드벨벳">레드벨벳
			<input type="checkbox" name="singer" value="동방신기">동방신기
		</td>
	</tr>	
	<tr>
		<td>성별</td>
		<td>
			<input type="radio" name="gender" value="남">남
			<input type="radio" name="gender" value="여">여
		</td>
	</tr>
	<tr>
		<td>글 쓰기</td>
		<td>
			<!-- 여러줄 작성할 때 사용하는 textarea 요소 -->
			<textarea rows="5" cols="30" name="ta"></textarea>
		</td>
	</tr>	
	<tr>
		<td colspan="2" align="center">
		<!-- 
		button과 달리 submit은 기본적으로 클릭시 form에 적혀있는 action 파일로 이동하는데
		onClick 속성으로 아래와 같이 함수를 주면 action 으로 이동하기 전에 유효성 검사를 진행할 수 있다. 
		 -->
			<input type="submit" value="전송합시다." onClick="return check()">
			&nbsp;&nbsp;&nbsp;
			<input type="reset" value="초기화">
		</td>
	</tr>	
</table>
</form>
</body>
</html>
저작자표시

'K-DigitalTraining 강의 > 6. Javascript(웹표준)' 카테고리의 다른 글

[8주차] 36. Java와는 다른, 객체(Object) 만드는 방법  (0) 2022.07.16
[8주차] 35. 정규표현식을 이용한 사용자입력 유효성 검사  (0) 2022.07.09
[8주차] 33. location 객체의 새로고침, 사이트이동 [ reload(), href 속성 ]  (0) 2022.07.09
[8주차] 32. history 객체의 go() 메소드(feat. back(),forward() 메소드) 뒤로가기, 앞으로가기  (0) 2022.07.09
[8주차] 31. document 객체에 포함된 객체(배열로 관리되는 요소들)  (0) 2022.07.09
'K-DigitalTraining 강의/6. Javascript(웹표준)' Related Articles more
Comments