코드
<!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에 현재값을 직접 들어가게 만들었다
'JQuery' 카테고리의 다른 글
| [jQuery] AJAX (0) | 2023.09.22 |
|---|---|
| [jQuery] load (0) | 2023.09.22 |
| [jQuery] animate (0) | 2023.09.22 |
| [jQuery] slide pade (0) | 2023.09.22 |
| [jQuery] show hide (0) | 2023.09.22 |