아이디 유효성 replace -> 문구노출로 변경

src/main/webapp/WEB-INF/views/mob/customer/JoinFormMob.html

@@ -41,12 +41,15 @@
 				<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="아이디" minlength="4" maxlength="12" autocomplete="no"/>
+						<input type="text" id="custId" name="custId" placeholder="아이디" class="form_control" required="required" data-valid-name="아이디" minlength="4" maxlength="12" autocomplete="no"/>
 						<span class="usable" style="display:block;"></span>
 					</div>
 					<div id="dupCustIdDiv" class="help_block hide">
 						<p class="t_err">이미 가입된 아이디입니다.다른 아이디를 입력하여 주세요.</p>
 					</div>
+					<div id="errCustIdDiv" class="help_block hide">
+						<p class="t_err">아이디는 영어와 숫자 조합만 가능합니다.</p>
+					</div>
 				</div>
 				<!-- //아이디 사용가능시 -->
 				<!-- 오류시 부모 div에서 제어 -->
@@ -194,13 +197,31 @@
 	// 아이디 확인
 	$('#custId').on('blur', function () {
 		let custId = $(this).val();
+		const $errCustIdDiv = $('#errCustIdDiv');
+		const $custId = $('#custId');
+
 		if(!gagajf.isNull(custId)) {
 			if (custId.length > 3) {
-				let custInfo = {};
-				custInfo.custId = custId;
-				let jsonData = JSON.stringify(custInfo);
-				gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
+				if (!fnCheckCustId(custId)) {
+					$custId.addClass('err');
+					$custId.removeClass('usable');
+					$errCustIdDiv.show();
+					return;
+				} else {
+					$custId.removeClass('err');
+					$custId.addClass('usable');
+					$errCustIdDiv.hide();
+					let custInfo = {};
+					custInfo.custId = custId;
+					let jsonData = JSON.stringify(custInfo);
+					gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
+				}
 			}
+		} else {
+			custIdCheck = false
+			$errCustIdDiv.show();
+			$custId.addClass('err');
+			$custId.removeClass('usable');
 		}
 	});
 

src/main/webapp/WEB-INF/views/web/customer/JoinFormWeb.html

@@ -34,12 +34,15 @@
 					<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" autocomplete="no"/>
+							<input type="text" id="custId" name="custId" placeholder="아이디(4~12자)" class="form_control" required="required" data-valid-name="아이디" minlength="4" maxlength="12" autocomplete="no"/>
 							<span class="usable" style="display:block;"></span>
 						</div>
 						<div id="dupCustIdDiv" class="help_block hide">
 							<p class="t_err">이미 가입된 아이디입니다.다른 아이디를 입력하여 주세요.</p>
 						</div>
+						<div id="errCustIdDiv" class="help_block hide">
+							<p class="t_err">아이디는 영어와 숫자 조합만 가능합니다.</p>
+						</div>
 					</div>
 					<!-- //아이디 사용가능시 -->
 					<!-- 오류시 부모 div에서 제어 -->
@@ -185,13 +188,31 @@
 	// 아이디 확인
 	$('#custId').on('blur', function () {
 		let custId = $(this).val();
+		let $errCustIdDiv = $('#errCustIdDiv');
+		const $custId = $('#custId');
+
 		if(!gagajf.isNull(custId)) {
 			if (custId.length > 3) {
-				let custInfo = {};
-				custInfo.custId = custId;
-				let jsonData = JSON.stringify(custInfo);
-				gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
+				if (!fnCheckCustId(custId)) {
+					$custId.addClass('err');
+					$custId.removeClass('usable');
+					$errCustIdDiv.show();
+					return;
+				} else {
+					$custId.removeClass('err');
+					$custId.addClass('usable');
+					$errCustIdDiv.hide();
+					let custInfo = {};
+					custInfo.custId = custId;
+					let jsonData = JSON.stringify(custInfo);
+					gagajf.ajaxJsonSubmit('/customer/join/id/check', jsonData, fnIdConfirmCallBack);
+				}
 			}
+		} else {
+			custIdCheck = false
+			$errCustIdDiv.show();
+			$custId.addClass('err');
+			$custId.removeClass('usable');
 		}
 	});
 

src/main/webapp/biz/customer.js

@@ -182,3 +182,17 @@ var fnValidationPwdSameConfirmPwd = function (password, confirmPassword) {
 
 	return result;
 };
+/**
+ * 확인 고객이디
+ * @param custId - 아이디
+ * @author jsshin
+ * @since 2021. 06. 11
+ */
+var fnCheckCustId = function (custId) {
+	const regexp = /[^a-zA-Z0-9]/gi;
+	let result = true;
+	if (regexp.test(custId)) {
+		result = false;
+	}
+	return result;
+}