style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : JoinFormWeb.html
 * @desc    : 회원정보 입력 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.05   jsshin     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<style>
	.show{display:block}
	.hide{display:none}
</style>
<div id="container" class="container mb">
	<div class="wrap">
		<div class="content join2"> <!-- 페이지특정 클래스 = join1 -->
			<div class="cont_head">
				<h3>style24</h3>
			</div>
			<div class="cont_body">
				<!-- form start -->
				<form id="joinForm" name="joinForm" class="form_wrap form_col_c form_full" role="form">
					<div class="form_head">
						<h4>회원정보 입력</h4>
					</div>
					<!-- 아이디 사용가능시 -->
					<div class="form_field">
						<label class="input_label sr-only">아이디</label>
						<div class="input_wrap form_full">
							<input type="text" id="custId" name="custId" placeholder="아이디" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디"/><!-- class "usable" 추가 --> <!-- 잘못기입된 경우 class "err" 추가 -->
							<span class="usable" style="display:block;"></span><!-- display:block / display:none 으로 control -->
						</div>
						<div id="dupCustIdDiv" class="help_block hide">
							<p class="t_err">이미 가입된 아이디입니다.다른 아이디를 입력하여 주세요.</p>
						</div>
					</div>
					<!-- //아이디 사용가능시 -->
					<!-- 오류시 부모 div에서 제어 -->
					<div class="form_field">
						<label class="input_label sr-only">비밀번호</label>
						<div class="input_wrap form_full">
							<input type="password" id="passwd" name="passwd" placeholder="비밀번호 (8~20자 영문, 숫자, 특수문자 중 2가지 이상 조합)" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/><!-- 잘못기입된 경우 class "err" 추가 -->
							<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
							<div class="help_block">
								<!-- 사용불가 비밀번호일경우 -->
								<p class="mt10">
									<span class="c_black2">
										<i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
									</span>
									<span class="c_red2">
										<i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
									</span>
									<span class="c_gray">
										<i class="ico ico_check gray mr5"></i>아이디 제외
									</span>
								</p>
								<!-- //사용불가 비밀번호일경우 -->
								<!-- 사용가능한 비밀번호일경우 -->
								<p class="mt10">
									<span class="c_black2">
										<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
									</span>
								</p>
								<!-- //사용가능한 비밀번호일경우 -->
							</div>
							<!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
						</div>
					</div>
					<!-- //오류시 부모 div에서 제어 -->
					<div class="form_field">
						<label class="input_label sr-only">비밀번호 확인</label>
						<div class="input_wrap form_full">
							<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" class="form_control" ><!-- 잘못기입된 경우 class "err" 추가 -->
							<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
							<div class="help_block">
								<!-- 비밀번호확인 틀렸을경우 -->
								<p class="t_err">
									비밀번호가 일치하지 않습니다.
								</p>
								<!-- //비밀번호확인 틀렸을경우 -->
								<!-- 비밀번호 일치할경우 -->
								<p class="mt10">
									<span class="c_black2"><i class="ico ico_check black mr5"></i>비밀번호가 일치합니다.</span>
								</p>
								<!-- //비밀번호 일치할경우 -->
							</div>
							<!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
						</div>
					</div>
					<div class="form_field">
						<label class="input_label sr-only">이메일</label>
						<div class="input_wrap form_full">
							<input type="text" id="email" name="email" placeholder="이메일" class="form_control"/><!-- 잘못기입된 경우 class "err" 추가 -->
							<!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
							<div class="help_block">
								<!-- 이메일 형식이 바르지않을경우 -->
								<p class="t_err">
									이메일 형식이 올바르지 않습니다.
								</p>
								<!-- //이메일 형식이 바르지않을경우 -->
								<!-- 이미 가입되어있는 이메일인경우 -->
								<p class="t_err">
									이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
								</p>
								<div class="mt20">
									<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_LOGIN);">
										<span>로그인</span>
									</button>
									<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
										<span>아이디 찾기</span>
									</button>
								</div>
								<!-- //이미 가입되어있는 이메일인경우 -->
							</div>
							<!-- //case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
						</div>
					</div>
					<div class="form_field">
						<label class="input_label sr-only">휴대폰번호</label>
						<div class="input_wrap form_full">
							<input type="text" name="userTell" placeholder="휴대폰번호" class="form_control" id="txtTell">
							<!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
							<div class="help_block">
								<!-- 휴대폰번호 형식이 맞지 않을경우 -->
								<p class="t_err">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
								<!-- //휴대폰번호 형식이 맞지 않을경우 -->
								<!-- 이미 가입되어있는 핸드폰번호일경우 -->
								<p class="t_err">I***D로 가입된 핸드폰 번호 입니다.</p>
								<div class="mt20">
									<button type="button" class="btn btn_default btn_sm"><span>휴대폰 인증</span></button>
								</div>
								<!-- //이미 가입되어있는 핸드폰번호일경우 -->
							</div>
							<!-- //case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
						</div>
					</div>
					<div class="mt40">
						<button class="btn btn_primary btn_block"><span>동의하고 가입하기</span></button>
					</div>
					<div class="desc_wrap t_c mt20">
						<p>
							본인은&nbsp;만 14세 이상이며&nbsp;<a href="" target="_blank">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,&nbsp;<a href="" target="_blank">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
							<a href="" target="_blank">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
						</p>
					</div>
				</form>
				<!-- form End -->
			</div>
		</div>
	</div>
</div>

<script th:src="@{'/ux/customer/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/customer/customer.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	//	중복된 아이디 확인
	$('#custId').on('blur', function () {
		let custId = $(this).val();
		if(!gagajf.isNull(custId)) {
			let custInfo = {};
			custInfo.custId = custId;
			let jsonData = JSON.stringify(custInfo);
			ajaxJsonSubmit('/customer/id/check', jsonData, fnIdConfirmCallBack)
		}

	});

	var fnIdConfirmCallBack = function (result) {
		let $dupCustIdDiv = $('dupCustIdDiv');
		if (result.isFind) { // 중복된 아이디가 존재
			$dupCustIdDiv.show();
		} else {

		}
	}

/*]]>*/
</script>

</th:block>

</body>
</html>