코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border-spacing: 0px;
}
</style>
<script src = "../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('input[name = "id"]').focus();
});//ready
function check(){
str = "입력한항목은\n"
if($('input[name = "id"]').val() == ""){
alert('아이디를 입력하세요');
$('input[name = "id"]').focus();
return false;
}
str += "아이디: " + $('input[name = "id"]').val() + "\n";
if($('input[name = "pw"]').val() == ""){
alert('비밀번호를 입력하세요');
$('input[name="pw"]').focus();
return false;
}
str += "비밀번호: " + $('input[name = "pw"]').val() + "\n";
if($('input[name = "pw2"]').val() == ""){
alert('비밀번호를 확인을 입력하세요');
$('input[name = "pw2"]').focus();
return false;
}
str += "비밀번호확인: " + $('input[name = "pw2"]').val() + "\n";
if($('input[name = "pw"]').val() != $('input[name = "pw2"]').val()){
alert('비밀번호가 일치하지 않습니다');
$('input[name = "pw2"]').select();
return false;
}
if($('input[name = "name"]').val() == ""){
alert('이름을 입력하세요');
$('input[name = "name"]').focus();
return false;
}
str += "이름: " + $('input[name = "name"]').val() + "\n";
if($('select[name = "phone"]').val() == "선택"){
alert('지역번호를 선택하세요');
$('input[name = "phone"]').focus();
return false;
}
if($('input[name = "ph1"]').val() == ""){
alert('전화번호를 입력하세요');
$('input[name = "ph1"]').focus();
return false;
}
if($('input[name = "ph2"]').val() == ""){
alert('전화번호를 입력하세요');
$('input[name = "ph2"]').focus();
return false;
}
if(isNaN($('input[name = "ph1"]').val())){
alert('전화번호를 숫자로 입력하세요');
$('input[name = "ph1"]').focus();
return false;
}
if(isNaN($('input[name = "ph2"]').val())){
alert('전화번호를 숫자로 입력하세요');
$('input[name = "ph2"]').focus();
return false;
}
str += "전화번호: " + $('select[name = "phone"]').val() + "-"
+ $('input[name = "ph1"]').val() + "-"
+ $('input[name = "ph2"]').val() + "\n";
if($('input[name = "email"]').val() == ""){
alert('이메일을 입력하세요');
$('input[name = "email"]').focus();
return false;
}
if($('input[name = "email"]').val().indexOf('@') == -1){
alert('이메일을 형식으로 입력하세요');
$('input[name = "email"]').focus();
return false;
}
str += "이름: " + $('input[name = "email"]').val() + "\n";
singer = "";
if($('input[name = "singer"]:checked').length < 1){
alert('좋아하는 가수를 선택하세요');
$('input[name = "singer"]').focus();
return false;
}
$('input[name = "singer"]:checked').each(function(){
singer += $(this).val() + " ";
});
str += "좋아하는 가수: " + singer + "\n";
if($('input[name = "gender"]:checked').length < 1){
alert('성별을 선택하세요');
$('input[name = "gender"]').focus();
return false;
}
str += "성별: " + $('input[name = "gender"]:checked').val() + "\n";
if($('textarea[name = "write"]').val() == ""){
alert('글쓰기를 입력하세요');
$('textarea[name = "write"]').focus();
return false;
}
str += "글 쓰기: " + $('textarea[name = "write"]').val() + "\n";
alert(str);
}
</script>
</head>
<body>
<form name="myform" action="result.jsp">
<table border ="2">
<tr>
<td width="200">아이디
<td width="400"><input name = "id" type = "text" style="width: 200px">
</tr>
<tr>
<td>비밀번호
<td><input name = "pw" type = "password" style="width: 200px" maxlength="12">
</tr>
<tr>
<td>비밀번호 확인
<td><input name = "pw2" type = "password" style="width: 200px" maxlength="12">
</tr>
<tr>
<td>이름
<td><input name = "name" type = "text" style="width: 200px">
</tr>
<tr>
<td>전화 번호
<td><select name = "phone">
<option value="선택">선택</option>
<option value="02">02</option>
<option value="031">031</option>
<option value="061">061</option>
<option value="043">043</option>
<option value="064">064</option>
</select>
- <input name="ph1" type="text" style="width: 100px" maxlength="4"> -
<input name="ph2" type="text" style="width: 100px" maxlength="4">
</tr>
<tr>
<td>주소
<td><input name = "add1" type = "text" style="width: 200px">
</tr>
<tr>
<td>세부주소
<td><input name = "add2" type = "text" style="width: 200px">
</tr>
<tr>
<td>email
<td><input name = "email" type = "email" style="width: 200px">
</tr>
<tr>
<td>좋아하는 가수
<td><input name = "singer" type = "checkbox" value = "소녀시대">소녀시대
<input name = "singer" type = "checkbox" value = "방탄">방탄
<input name = "singer" type = "checkbox" value = "레드벨벳">레드벨벳
<input name = "singer" type = "checkbox" value = "동방신기">동방신기
</tr>
<tr>
<td>성별
<td><input name = "gender" type = "radio" value = "남">남
<input name = "gender" type = "radio" value = 여>여
</tr>
<tr>
<td>글 쓰기
<td><textarea cols="30" rows="5" name = "write"></textarea>
</tr>
<tr>
<td colspan="2" style = "text-align: center">
<input type = "submit" value = "전송합시다" onclick="return check()">
<input type = "reset" value = "초기화">
</tr>
</table>
</form>
</body>
</html>
실행결과
코드설명
$('input[name = id]').val() 의 의미는 input태그있는곳중 name이 id인곳의 value를 가져오는 코드이다
if($('input[name = "singer"]:checked').length < 1){ 이부분의 경우 내가 kind라는곳에 체크한곳이 1개라도 없을때 실행되는 if문이다 checked를 활용
singer을 따로빼서 변수를 만든이유는 그냥 str에 출력시 다양한 가수를 선택해도 소녀시대만 뜨기때문에 each로 반복한다음 singer에 현재값을 직접 들어가게 만들었다