728x90
기존 배우던 코드를 쭉 편하게 따라치면서 구조 분석하고 대강 틀만보고 안보고 치면서 세부코드 치는 연습
그리고 코딩 자체가 많이 익숙해지고 에너지 소모가 덜 되서 자연스러울 수 있게 하기 위한 목적으로
머리 안돌아갈 때마다 쭉 따라치면서 가볍게 많이!!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="member-style.css">
<style>
span.guide{display: none; font-size:12px; top:12px; right:10px;}
span.ok{color:green;}
span.error{color:red;}
</style>
</head>
<body>
<jsp:include page="../common/menubar.jsp"/>
<h1 align="center">회원가입</h1>
<div class="centerText">
<form action="minsert.me" method="post" id="joinForm">
<table>
<tr>
<th>* 아이디</th>
<td>
<input type="text" name="id" id="userId">
<span class="guide ok">사용 가능한 아이디</span>
<span class="guide error">사용 불가능 아이디</span>
<input type="hidden" id="idDuplicateCheck" value="0"/>
</td>
</tr>
<tr>
<th>* 이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>* 비밀번호확인</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>닉네임</th>
<td><input type="text" name="nickName"></td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="M">남
<input type="radio" name="gender" value="F">여
</td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" min="20" max="100"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" name="email"></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type="tel" name="phone"></td>
</tr>
<tr>
<th>우편번호</th>
<td>
<input type="text" name="post" class="postcodify_postcode5" value="" size="6">
<button type="button" id="postcodify_search_button">검색</button>
</td>
</tr>
<tr>
<th>도로명 주소</th>
<td><input type="text" name="address1" class="postcodify_address" value=""></td>
</tr>
<tr>
<th>상세 주소</th>
<td><input type="text" name="address2" class="postcodify_extra_info" value=""></td>
</tr>
<!-- jQuery & Postcodify 로딩 -->
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<script>
// 검색 단추가 열리면 팝업 레이어가 열리도록 설정
$(function(){
$("#postcodify_search_button").postcodifyPopUp();
});
</script>
<tr>
<td>
<button onclik="return validate();">가입하기</button>
<input type="reset" value="취소하기">
<button type="button" onclick="location.href='home.do'">시작 페이지로</button>
</td>
</tr>
</table>
</form>
</div>
<script>
${'#userId'}.on('keyup',function(){
var userId = $(this).val().trim(); // trim() : 앞뒤 공백제거
if(userId.length < 4){
$('.guide').hide();
$('#idDuplicateCheck').val(0);
return;
}
$.ajax({
url: 'dupId.me',
date: {id:userId},
success: function(date){
console.log(date);
if(data == 1){ /* 이 데이터가 원래는 str타입으로 넘어가고 있으나 js에서 알아서 형변환 */
$('.guide.error').show();
$('.guide.ok').hide();
$('#idDuplicateCheck').val(0); // 에러라 유효성 필요없으니 0보냄
}else{
$('.guide.error').hide();
$('guide.ok').show();
$('#idDuplicateCheck').val(1); // 에러없으니 유효성 검사 필요해서 1보냄
}
},
error: function(data){
console.log(data);
}
});
});
function validate(){
if($('#idDuplicateCheck').val() == 0){
alert('사용 가능한 아이디를 입력해주세요');
$('#userId').focus();
return false();
} else{
$('#joinForm').submit();
}
}
</script>
</body>
</html>
728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
| [1일 1코딩][HTML-CSS] 게시판 숙련도 올리기 - table태그 방식 (0) | 2022.07.13 |
|---|---|
| [1일 1코딩][GitBash] 브랜치 생성, 변경, 통합 등 (0) | 2022.07.12 |
| [1일 1코딩][Web] menubar.jsp (feat. EL+JSTL) (0) | 2022.07.10 |
| [1일 1코딩][Web] memberPwdUpdateForm.jsp 2 (0) | 2022.07.09 |
| [1일 1코딩][Web] 관리자페이지 공지사항 작성 (0) | 2022.07.08 |