|
|
@@ -38,7 +38,7 @@
|
|
|
<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="아이디 (4~12자)" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디" minlength="4" maxlength="12"/>
|
|
|
+ <input type="text" id="custId" name="custId" placeholder="아이디(4~12자)" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디" minlength="4" maxlength="12"/>
|
|
|
<span class="usable" style="display:block;"></span><!-- display:block / display:none 으로 control -->
|
|
|
</div>
|
|
|
<div id="dupCustIdDiv" class="help_block hide">
|
|
|
@@ -55,19 +55,19 @@
|
|
|
<div class="help_block">
|
|
|
<!-- 사용불가 비밀번호일경우 -->
|
|
|
<p class="mt10">
|
|
|
- <span class="c_black2">
|
|
|
- <i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
|
|
|
+ <span id="firstFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
|
|
|
</span>
|
|
|
- <span class="c_red2">
|
|
|
- <i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
|
|
|
+ <span id="secondFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
|
|
|
</span>
|
|
|
- <span class="c_gray">
|
|
|
+ <span id="thirdFailed" class="c_gray">
|
|
|
<i class="ico ico_check gray mr5"></i>아이디 제외
|
|
|
</span>
|
|
|
</p>
|
|
|
<!-- //사용불가 비밀번호일경우 -->
|
|
|
<!-- 사용가능한 비밀번호일경우 -->
|
|
|
- <p class="mt10">
|
|
|
+ <p id="avlPwd" class="mt10 hide">
|
|
|
<span class="c_black2">
|
|
|
<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
|
|
|
</span>
|
|
|
@@ -85,12 +85,12 @@
|
|
|
<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
<div class="help_block">
|
|
|
<!-- 비밀번호확인 틀렸을경우 -->
|
|
|
- <p class="t_err">
|
|
|
+ <p id="misPwd" class="t_err hide">
|
|
|
비밀번호가 일치하지 않습니다.
|
|
|
</p>
|
|
|
<!-- //비밀번호확인 틀렸을경우 -->
|
|
|
<!-- 비밀번호 일치할경우 -->
|
|
|
- <p class="mt10">
|
|
|
+ <p id="avlConPwd" class="mt10 hide">
|
|
|
<span class="c_black2"><i class="ico ico_check black mr5"></i>비밀번호가 일치합니다.</span>
|
|
|
</p>
|
|
|
<!-- //비밀번호 일치할경우 -->
|
|
|
@@ -101,19 +101,19 @@
|
|
|
<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" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
+ <input type="text" id="email" name="email" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
|
|
|
<!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
|
|
|
<div class="help_block">
|
|
|
<!-- 이메일 형식이 바르지않을경우 -->
|
|
|
- <p class="t_err">
|
|
|
+ <p id="failEmail" class="t_err hide">
|
|
|
이메일 형식이 올바르지 않습니다.
|
|
|
</p>
|
|
|
<!-- //이메일 형식이 바르지않을경우 -->
|
|
|
<!-- 이미 가입되어있는 이메일인경우 -->
|
|
|
- <p class="t_err">
|
|
|
+ <p id="dupEmail" class="t_err hide">
|
|
|
이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
|
|
|
</p>
|
|
|
- <div class="mt20">
|
|
|
+ <div id="dupEmailDiv" class="mt20 hide">
|
|
|
<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
<span>로그인</span>
|
|
|
</button>
|
|
|
@@ -129,16 +129,16 @@
|
|
|
<div class="form_field">
|
|
|
<label class="input_label sr-only">휴대폰번호</label>
|
|
|
<div class="input_wrap form_full">
|
|
|
- <input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰번호" class="form_control"/>
|
|
|
+ <input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰번호" class="form_control" minlength="10" maxlength="11" required="required" data-valid-type="numeric" data-valid-name="휴대폰번호" />
|
|
|
<!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
|
|
|
<div class="help_block">
|
|
|
<!-- 휴대폰번호 형식이 맞지 않을경우 -->
|
|
|
- <p class="t_err">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
|
|
|
+ <p id="failPhnno" class="t_err hide">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
|
|
|
<!-- //휴대폰번호 형식이 맞지 않을경우 -->
|
|
|
<!-- 이미 가입되어있는 핸드폰번호일경우 -->
|
|
|
- <p class="t_err">I***D로 가입된 핸드폰 번호 입니다.</p>
|
|
|
+ <p id="dupPhnno" class="t_err hide">I***D로 가입된 핸드폰 번호 입니다.</p>
|
|
|
<div class="mt20">
|
|
|
- <button type="button" class="btn btn_default btn_sm">
|
|
|
+ <button type="button" id="btnCellPhoneCertify" class="btn btn_default btn_sm">
|
|
|
<span>휴대폰 인증</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
@@ -148,7 +148,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt40">
|
|
|
- <button class="btn btn_primary btn_block"><span>동의하고 가입하기</span></button>
|
|
|
+ <button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
|
|
|
+ <span>동의하고 가입하기</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
<div class="desc_wrap t_c mt20">
|
|
|
<p>
|
|
|
@@ -163,44 +165,275 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-<script th:src="@{'/ux/customer/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/customer/customer.js"></script>
|
|
|
+<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
|
|
|
<script th:inline="javascript">
|
|
|
/*<![CDATA[*/
|
|
|
- // 중복된 아이디 확인
|
|
|
+ let custIdCheck = false;
|
|
|
+ let passwdCheck = false;
|
|
|
+ let emailCheck = false;
|
|
|
+ let phoneCheck = false;
|
|
|
+ let authCheck = false;
|
|
|
+
|
|
|
+ // 아이디 확인
|
|
|
$('#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)
|
|
|
+ if (custId.length > 3) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.custId = custId;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
});
|
|
|
|
|
|
+ // 아이디 결과
|
|
|
var fnIdConfirmCallBack = function (result) {
|
|
|
+ const $dupCustIdDiv = $('#dupCustIdDiv');
|
|
|
+ const $custId = $('#custId');
|
|
|
+ const $usable = $('.usable');
|
|
|
+
|
|
|
if (result.isFind) { // 중복된 아이디가 존재
|
|
|
- fnDisplayCustIdDiv(false);
|
|
|
+ $custId.addClass('err');
|
|
|
+ $custId.removeClass('usable');
|
|
|
+ $dupCustIdDiv.show();
|
|
|
+ $usable.hide();
|
|
|
+ custIdCheck = false;
|
|
|
} else {
|
|
|
- fnDisplayCustIdDiv(true);
|
|
|
+ $custId.removeClass('err');
|
|
|
+ $custId.addClass('usable');
|
|
|
+ $dupCustIdDiv.hide();
|
|
|
+ $usable.show();
|
|
|
+ custIdCheck = true;
|
|
|
}
|
|
|
+
|
|
|
};
|
|
|
|
|
|
- var fnDisplayCustIdDiv = function (bool) {
|
|
|
- let $dupCustIdDiv = $('#dupCustIdDiv');
|
|
|
- let $custId = $('#custId');
|
|
|
- if (bool) { // 사용가능
|
|
|
- $custId.removeClass('err'); //잘못기입된 경우
|
|
|
- $custId.addClass('usable');
|
|
|
- $('.usable').show();
|
|
|
- } else { // 사용가능 하지 않음
|
|
|
- $custId.addClass('err'); //잘못기입된 경우
|
|
|
- $custId.removeClass('usable');
|
|
|
- $dupCustIdDiv.show();
|
|
|
- $('.usable').hide();
|
|
|
+ // 비밀번호 입력
|
|
|
+ $('#joinForm input[name=passwd]').on('focusout keyup keydown', function () {
|
|
|
+ fnCheckPassword();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 비밀번호 확인 입력
|
|
|
+ $('#joinForm input[name=confirmPassword]').on('focusout keyup keydown', function () {
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 비밀번호 확인
|
|
|
+ var fnCheckPassword = function () {
|
|
|
+ const $firstFailed = $('#firstFailed');
|
|
|
+ const $secondFailed = $('#secondFailed');
|
|
|
+ const $thirdFailed = $('#thirdFailed');
|
|
|
+ const $avlPwd = $('#avlPwd');
|
|
|
+ const red = 'c_red2';
|
|
|
+ const gray = 'c_gray';
|
|
|
+
|
|
|
+ let custId = $('#joinForm input[name=custId]').val();
|
|
|
+ let password = $('#joinForm input[name=passwd]').val();
|
|
|
+ let confirmPassword = $('#joinForm input[name=confirmPassword]').val();
|
|
|
+ let pwdCheck = true;
|
|
|
+
|
|
|
+
|
|
|
+ // 영문, 숫자, 특수문자 2종 이상 혼용 || 길이
|
|
|
+ if (fnValidtaionPwdMixedWord(password) || fnValidationPwdLength(password)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $firstFailed.removeClass(gray);
|
|
|
+ $firstFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $firstFailed.removeClass(red);
|
|
|
+ $firstFailed.addClass(gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
|
|
|
+ if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $secondFailed.removeClass(gray);
|
|
|
+ $secondFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $secondFailed.removeClass(red);
|
|
|
+ $secondFailed.addClass(gray);
|
|
|
}
|
|
|
+
|
|
|
+ // 아이디 포함
|
|
|
+ if (!gagajf.isNull(custId)) {
|
|
|
+ if (fnValidationPwdSameId(password, custId)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $thirdFailed.removeClass(gray);
|
|
|
+ $thirdFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $thirdFailed.removeClass(red);
|
|
|
+ $thirdFailed.addClass(gray);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (pwdCheck) {
|
|
|
+ $firstFailed.hide();
|
|
|
+ $secondFailed.hide();
|
|
|
+ $thirdFailed.hide();
|
|
|
+ $avlPwd.show();
|
|
|
+ } else {
|
|
|
+ $firstFailed.show();
|
|
|
+ $secondFailed.show();
|
|
|
+ $thirdFailed.show();
|
|
|
+ $avlPwd.hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!gagajf.isNull(confirmPassword)) {
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ }
|
|
|
+
|
|
|
};
|
|
|
|
|
|
+ // 비밀번호 확인
|
|
|
+ var fnCheckConfirmPassword = function () {
|
|
|
+ const $misPwd = $('#misPwd');
|
|
|
+ const $avlConPwd = $('#avlConPwd');
|
|
|
+ let password = $('#joinForm input[name=passwd]').val();
|
|
|
+ let confirmPassword = $('#joinForm input[name=confirmPassword]').val();
|
|
|
+ if (!gagajf.isNull(password) && !gagajf.isNull(confirmPassword)) {
|
|
|
+ if (fnValidationPwdSameConfirmPwd(password, confirmPassword)) {
|
|
|
+ $avlConPwd.hide();
|
|
|
+ $misPwd.show();
|
|
|
+ passwdCheck = false;
|
|
|
+ } else {
|
|
|
+ $misPwd.hide();
|
|
|
+ $avlConPwd.show();
|
|
|
+ passwdCheck = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 이메일 확인
|
|
|
+ $('#email').on('blur', function () {
|
|
|
+ const $failEmail = $('#failEmail');
|
|
|
+ let email = $(this).val();
|
|
|
+ let validation;
|
|
|
+
|
|
|
+ if(!gagajf.isNull(email)) {
|
|
|
+ if (!fnCheckValidationEmail(email)) {
|
|
|
+ $failEmail.show();
|
|
|
+ emailCheck = false;
|
|
|
+ validation = false;
|
|
|
+ } else {
|
|
|
+ validation = true;
|
|
|
+ $failEmail.hide();
|
|
|
+ }
|
|
|
+ if (validation) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.email = email;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/email/check', jsonData, fnEmailConfirmCallBack);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 이메일 확인 결과
|
|
|
+ var fnEmailConfirmCallBack = function (result) {
|
|
|
+ const $dupEmail = $('#dupEmail');
|
|
|
+ const $dupEmailDiv = $('#dupEmailDiv');
|
|
|
+ if (result.isFind) { // 중복된 아이디가 존재
|
|
|
+ $dupEmail.show();
|
|
|
+ $dupEmailDiv.show();
|
|
|
+ emailCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupEmail.hide();
|
|
|
+ $dupEmailDiv.hide();
|
|
|
+ emailCheck = true;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 휴대폰 확인
|
|
|
+ $('#cellPhnno').on('blur', function () {
|
|
|
+ const $failPhnno = $('#failPhnno');
|
|
|
+ let cellPhnno = $(this).val();
|
|
|
+ let validation;
|
|
|
+
|
|
|
+ if (gagajf.isNull(cellPhnno)) {
|
|
|
+ if ( 9 < cellPhnno < 12) {
|
|
|
+ $failPhnno.hide();
|
|
|
+ validation = true;
|
|
|
+ } else {
|
|
|
+ $failPhnno.show();
|
|
|
+ validation = false;
|
|
|
+ }
|
|
|
+ if (validation) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.cellPhnno = cellPhnno;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/cellphnno/check', jsonData, fnPhoneConfirmCallBack);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 휴대폰 번호 입력에대한 결과
|
|
|
+ var fnPhoneConfirmCallBack = function (result) {
|
|
|
+ // const $cellPhnno = $('#cellPhnno');
|
|
|
+ const $dupPhnno = $('#dupPhnno');
|
|
|
+ if (result.isFind) { // 가입된 고객 정보가 있으면
|
|
|
+ $dupPhnno.text(result.maskingCustId+'로 가입된 핸드폰 번호 입니다.');
|
|
|
+ $dupPhnno.show();
|
|
|
+ // $cellPhnno.text(result.cellPhnno);
|
|
|
+ // $cellPhnno.show();
|
|
|
+ authCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupPhnno.hide();
|
|
|
+ authCheck = true;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ //휴대폰 인증
|
|
|
+ $('#btnCellPhoneCertify').on('click', function () {
|
|
|
+ cfnOpenCellphoneCertify();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 나이스 본인인증 후 콜백
|
|
|
+ var fnNiceCallBack = function(encData) {
|
|
|
+ if (!gagajf.isNull(encData)) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.encData = encData;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/authentication/validation', jsonData, fnInfoConfirmCallBack);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 본인이증 후 결과
|
|
|
+ var fnInfoConfirmCallBack = function (result) {
|
|
|
+ // const $cellPhnno = $('#cellPhnno');
|
|
|
+ const $dupPhnno = $('#dupPhnno');
|
|
|
+ if (result.isFind) { // 가입된 고객 정보가 있으면
|
|
|
+ $dupPhnno.text(result.maskingCustId+'로 가입된 핸드폰 번호 입니다.');
|
|
|
+ $dupPhnno.show();
|
|
|
+ // $cellPhnno.text(result.cellPhnno);
|
|
|
+ // $cellPhnno.show();
|
|
|
+ authCheck = false;
|
|
|
+ } else {
|
|
|
+ $dupPhnno.hide();
|
|
|
+ authCheck = true;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 저장
|
|
|
+ $('#btnJoin').on('click', function () {
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // 가입 가능한지 확인
|
|
|
+ var fnPossibleJoin = function () {
|
|
|
+ const $btnJoin = $('#btnJoin')
|
|
|
+ if (custIdCheck && passwdCheck && emailCheck && phoneCheck && authCheck ) {
|
|
|
+ $btnJoin.attr('disabled', false);
|
|
|
+ } else {
|
|
|
+ $btnJoin.attr('disabled', true);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ fnPossibleJoin();
|
|
|
+ });
|
|
|
+
|
|
|
/*]]>*/
|
|
|
</script>
|
|
|
|