<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function checkit(objFrm){
//1.데이터 추출
var userId = objFrm.userId.value;
var userPw = objFrm.userPw.value;
var userPwConfirm = objFrm.userPwConfirm.value;
var sex = "";
var objSex = document.getElementsByName("sex");
if(objSex == null){
sex = objFrm.sex.value;
}else{
for(var indexI = 0;indexI < objSex.length;indexI++){
if(objSex[indexI].checked){
sex = objSex[indexI].value;
}
}
}
var hobbyCount = 0;
//checkbox에 체크된게 있는지 없는지 검사하기 위하여 선택된 수를 저장하게된 변수
var objHobby = document.getElementsByName("hobby");
if(objHobby == null){
}else{
for(var indexI = 0;indexI < objHobby.length;indexI++){
if(objHobby[indexI].checked){
hobbyCount++;
//checkbox의 수만큼 loop문을 돌며 체크되어 있는 수를 저장한다.
//checkbox에 체크되어 있으면 hobbyCount가 1씩 증가한다.
}
}
}
//radio, checkbox, select의 값을 가져오려면 loop문을 이용하여 가져온다.
var location = objFrm.location.selectedIndex;
//select에 선택된 값이 있는지를 검사하기 위하여 location에 select의 인덱스 값을 저장
//선택이 안되있을경우 0값을 리턴해준다.
//그외에 선택된 경우엔 선택된 인덱스 값을 리턴해준다.
}
</script>
</head>
<body>
<form name="objFrm" action="regist_process.jsp" method="POST" onsubmit="return checkit(this);">
//function 앞에 return이 붙은 이유..
//안붙는 경우엔 submit이 클릭되는경우에 무조건 action이 실행된다.
//return이 붙는 경우엔 submit이 클릭될때 function이 리턴하는값이 true일 경우에 실행된다.
//파라미터로 현재의 폼을 준다.
<table width="80%" border="1" align="center">
<tr>
<td>사용자 아이디</td>
<td><input type="text" id="userId" name="userId" size="20" maxlength="20"/></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" id="userPw" name="userPw" size="20" maxlength="20"/></td>
</tr>
<tr>
<td>패스워드확인</td>
<td><input type="password" id="userPwConfirm" name="userPwConfirm" size="20" maxlength="20"/></td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" id="sex_m" name="sex" value="M" checked="checked"/>남성
<input type="radio" id="sex_f" name="sex" value="F" />여성
</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" id="hobby_ski" name="hobby" value="ski"/>스키
<input type="checkbox" id="hobby_sky" name="hobby" value="sky"/>스카이다이빙
<input type="checkbox" id="hobby_swim" name="hobby" value="swim"/>수영
<input type="checkbox" id="hobby_soccer" name="hobby" value="soccer"/>축구
<input type="checkbox" id="hobby_basketball" name="hobby" value="basketball"/>농구
</td>
</tr>
<tr>
<td>거주지</td>
<td>
<select id="location" name="location">
<option value="choice">거주지를 선택하여 주세요.</option>
<option value="seoul">서울</option>
<option value="pusan">부산</option>
<option value="gyounggi">경기</option>
<option value="ulsan">울산</option>
<option value="chungnam">충남</option>
</select>
</td>
</tr>
</table>
<table width="80%" border="1" align="center">
<tr>
<td>
<input type="submit" value="회원가입">
</td>
</tr>
</table>
</form>
</body>
</html>
역시나 웹으로 들어오면서 HTML과 JavaScript는 어렵다.
어렵다 생각하면 계속 어려운데..어려운걸 어떡하나..-_-;;
게다가 조장까지..수업시간의 모든내용을 머릿속에 담는 기능을 코딩 해야 하는건가..
JavaScript의 여러기능들은 잘 숙지하도록 하자..!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function checkit(objFrm){
//1.데이터 추출
var userId = objFrm.userId.value;
var userPw = objFrm.userPw.value;
var userPwConfirm = objFrm.userPwConfirm.value;
var sex = "";
var objSex = document.getElementsByName("sex");
if(objSex == null){
sex = objFrm.sex.value;
}else{
for(var indexI = 0;indexI < objSex.length;indexI++){
if(objSex[indexI].checked){
sex = objSex[indexI].value;
}
}
}
var hobbyCount = 0;
//checkbox에 체크된게 있는지 없는지 검사하기 위하여 선택된 수를 저장하게된 변수
var objHobby = document.getElementsByName("hobby");
if(objHobby == null){
}else{
for(var indexI = 0;indexI < objHobby.length;indexI++){
if(objHobby[indexI].checked){
hobbyCount++;
//checkbox의 수만큼 loop문을 돌며 체크되어 있는 수를 저장한다.
//checkbox에 체크되어 있으면 hobbyCount가 1씩 증가한다.
}
}
}
//radio, checkbox, select의 값을 가져오려면 loop문을 이용하여 가져온다.
var location = objFrm.location.selectedIndex;
//select에 선택된 값이 있는지를 검사하기 위하여 location에 select의 인덱스 값을 저장
//선택이 안되있을경우 0값을 리턴해준다.
//그외에 선택된 경우엔 선택된 인덱스 값을 리턴해준다.
//2.유효성 검사
if(userId == null || userId.length < 6 || userId.length > 20){
alert("사용자 아이디는 6글자 이상 20자 미만이어야 합니다.");
objFrm.userId.focus();
return false;
}
if(userPw == null || userPw.length < 6 || userPw.length > 20){
alert("사용자 비밀번호는 6글자 이상 20자 미만이어야 합니다.");
return false;
}
if(userPw != userPwConfirm){
alert("패스워드가 일치하지 않습니다.");
return false;
}
if(hobbyCount == 0){
alert("취미는 최소한 한가지 이상 선택하셔야 합니다.");
return false;
}
if(location == 0){
alert("거주지를 선택하세요");
return false;
}
//3.처리
//4.결과출력
return true;
//유효성 검사를 다 통과한 경우에 true값을 리턴한다.
if(userId == null || userId.length < 6 || userId.length > 20){
alert("사용자 아이디는 6글자 이상 20자 미만이어야 합니다.");
objFrm.userId.focus();
return false;
}
if(userPw == null || userPw.length < 6 || userPw.length > 20){
alert("사용자 비밀번호는 6글자 이상 20자 미만이어야 합니다.");
return false;
}
if(userPw != userPwConfirm){
alert("패스워드가 일치하지 않습니다.");
return false;
}
if(hobbyCount == 0){
alert("취미는 최소한 한가지 이상 선택하셔야 합니다.");
return false;
}
if(location == 0){
alert("거주지를 선택하세요");
return false;
}
//3.처리
//4.결과출력
return true;
//유효성 검사를 다 통과한 경우에 true값을 리턴한다.
}
</script>
</head>
<body>
<form name="objFrm" action="regist_process.jsp" method="POST" onsubmit="return checkit(this);">
//function 앞에 return이 붙은 이유..
//안붙는 경우엔 submit이 클릭되는경우에 무조건 action이 실행된다.
//return이 붙는 경우엔 submit이 클릭될때 function이 리턴하는값이 true일 경우에 실행된다.
//파라미터로 현재의 폼을 준다.
<table width="80%" border="1" align="center">
<tr>
<td>사용자 아이디</td>
<td><input type="text" id="userId" name="userId" size="20" maxlength="20"/></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" id="userPw" name="userPw" size="20" maxlength="20"/></td>
</tr>
<tr>
<td>패스워드확인</td>
<td><input type="password" id="userPwConfirm" name="userPwConfirm" size="20" maxlength="20"/></td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" id="sex_m" name="sex" value="M" checked="checked"/>남성
<input type="radio" id="sex_f" name="sex" value="F" />여성
</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" id="hobby_ski" name="hobby" value="ski"/>스키
<input type="checkbox" id="hobby_sky" name="hobby" value="sky"/>스카이다이빙
<input type="checkbox" id="hobby_swim" name="hobby" value="swim"/>수영
<input type="checkbox" id="hobby_soccer" name="hobby" value="soccer"/>축구
<input type="checkbox" id="hobby_basketball" name="hobby" value="basketball"/>농구
</td>
</tr>
<tr>
<td>거주지</td>
<td>
<select id="location" name="location">
<option value="choice">거주지를 선택하여 주세요.</option>
<option value="seoul">서울</option>
<option value="pusan">부산</option>
<option value="gyounggi">경기</option>
<option value="ulsan">울산</option>
<option value="chungnam">충남</option>
</select>
</td>
</tr>
</table>
<table width="80%" border="1" align="center">
<tr>
<td>
<input type="submit" value="회원가입">
</td>
</tr>
</table>
</form>
</body>
</html>
역시나 웹으로 들어오면서 HTML과 JavaScript는 어렵다.
어렵다 생각하면 계속 어려운데..어려운걸 어떡하나..-_-;;
게다가 조장까지..수업시간의 모든내용을 머릿속에 담는 기능을 코딩 해야 하는건가..
JavaScript의 여러기능들은 잘 숙지하도록 하자..!
'Java' 카테고리의 다른 글
| Java Compile Version Error..! (0) | 2012.03.15 |
|---|---|
| Java의 문자열 비교..! (0) | 2011.10.04 |
| Java - Lotto(로또) (0) | 2009.10.14 |
| Eclipse Galileo Ver...! (0) | 2009.07.02 |
| Java Oracle JDBC 관련 부분...! (0) | 2009.06.24 |
