Commit @6bd8203abfb90998117176fad955b82b379a6576

하석형 05-12

250512 하석형 회원관리 휴대폰, 전화번호 입력시 하이픈 표기

@6bd8203abfb90998117176fad955b82b379a6576

7694367

6bd8203

client/resources/js/validateParams.js

--- client/resources/js/validateParams.js

+++ client/resources/js/validateParams.js


 
     // 휴대폰번호
     validateMblNo(key) {
-      if (this.isEmpty(key)) {
+      const raw = key.replace(/-/g, ''); // 하이픈 제거
+
+      if (this.isEmpty(raw)) {
         alert("휴대폰번호를 입력하세요.");
         this.$refs.mblTelno.focus();
         return false;
       } // 입력 여부
-      if (!this.minLength(key, 10)) {
+      if (!this.minLength(raw, 10)) {
         alert("휴대폰번호는 10자 이상으로 입력하세요.");
         this.$refs.mblTelno.focus();
         return false;
       } // 최소 길이
-      if (!this.maxLength(key, 11)) {
+      if (!this.maxLength(raw, 11)) {
         alert("휴대폰번호는 11자 이하로 입력하세요.");
         this.$refs.mblTelno.focus();
         return false;
       } // 최대 길이
       const telRegex = /^01[016789][0-9]{3,4}[0-9]{4}$/;
-      if(!telRegex.test(key)) {
+      if(!telRegex.test(raw)) {
         alert("휴대폰번호 형식이 맞지 않습니다.");
         this.$refs.mblTelno.focus();
         return false;

7694367

6bd8203

client/views/component/userInfo/UserInfoInsert.vue

--- client/views/component/userInfo/UserInfoInsert.vue

+++ client/views/component/userInfo/UserInfoInsert.vue


                   " />
             </div>
             <!-- <template v-if="showOpt.isMblNo || showOpt.isTelNo"> -->
-              <div v-if="showOpt.isMblNo" class="layout">
-                <label class="form-title"><span>*</span>휴대폰번호</label>
-                <input type="text" class="form-control sm" ref="mblTelno" v-model="mbrVO.mblTelno" minlength="10"
-                  maxlength="11" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
-                  placeholder="휴대폰번호를 입력하세요." />
-              </div>
+            <div v-if="showOpt.isMblNo" class="layout">
+              <label class="form-title"><span>*</span>휴대폰번호</label>
+              <input type="text" class="form-control sm" ref="mblTelno" v-model="mbrVO.mblTelno"
+                @input="inputFormatPhone"
+                maxlength="13"
+                placeholder="휴대폰번호를 입력하세요." />
+            </div>
             <!-- </template> -->
             <div v-if="showOpt.isTelNo" class="layout">
               <label class="form-title">전화번호</label>
               <input type="text" class="form-control sm" ref="telno" v-model="mbrVO.telno"
-                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
+                @input="inputFormatTel"
+                maxlength="13"
                 placeholder="전화번호를 입력해주세요." />
             </div>
             <!-- <template v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree"> -->

     },
     // 표기변경
     changeFormat() {
-      // 휴대폰 번호
-      let mblNo = this.mbrVO.mblTelno;
-      if (mblNo != null) {
-        this.mbrVO.mblTelno = mblNo.replace(/[^0-9]/g, "");
+      // 휴대폰번호 포맷
+      const mbl = this.mbrVO.mblTelno?.replace(/[^0-9]/g, '') || '';
+      if (mbl.length === 10) {
+        this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
+      } else if (mbl.length === 11) {
+        this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
       }
-      // 전화번호
-      let telNo = this.mbrVO.telno;
-      if (telNo != null) {
-        this.mbrVO.telno = telNo.replace(/[^0-9]/g, "");
+
+      // 전화번호 포맷
+      const tel = this.mbrVO.telno?.replace(/[^0-9]/g, '') || '';
+      if (tel.startsWith('02')) {
+        // 서울 지역번호 (2자리)
+        if (tel.length === 9) {
+          this.mbrVO.telno = tel.replace(/(\d{2})(\d{3})(\d{4})/, '$1-$2-$3');
+        } else if (tel.length === 10) {
+          this.mbrVO.telno = tel.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');
+        }
+      } else {
+        // 나머지 지역번호 (3자리)
+        if (tel.length === 10) {
+          this.mbrVO.telno = tel.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
+        } else if (tel.length === 11) {
+          this.mbrVO.telno = tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
+        }
       }
+
       // 이메일
       if (this.mbrVO.eml != null) {
         const email = this.mbrVO.eml.split("@");

             this.email.select = "self";
             this.email.address = email[1];
             break;
+        }
+      }
+    },
+
+    // 휴대폰 번호 입력 포맷
+    inputFormatPhone(event) {
+      let input = event.target.value.replace(/[^0-9]/g, '');
+
+      if (input.length <= 3) {
+        this.mbrVO.mblTelno = input;
+      } else if (input.length <= 6) {
+        this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3);
+      } else if (input.length === 10) {
+        // 10자리는 3-3-4
+        this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
+      } else {
+        // 기본은 3-4-4
+        this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
+      }
+    },
+
+    // 전화번호 입력 포맷
+    inputFormatTel(event) {
+      let input = event.target.value.replace(/[^0-9]/g, '');
+
+      if (input.startsWith('02')) {
+        // 서울 지역번호 (2자리)
+        if (input.length <= 2) {
+          this.mbrVO.telno = input;
+        } else if (input.length <= 5) {
+          this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2);
+        } else if (input.length <= 9) {
+          this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 5) + '-' + input.slice(5);
+        } else {
+          this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 6) + '-' + input.slice(6, 10);
+        }
+      } else {
+        // 나머지 지역번호 (3자리)
+        if (input.length <= 3) {
+          this.mbrVO.telno = input;
+        } else if (input.length <= 6) {
+          this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3);
+        } else if (input.length <= 10) {
+          this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
+        } else {
+          this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
         }
       }
     },

         data.pswd = null;
       }
 
+      // 휴대폰 번호
+      data.mblTelno = this.mbrVO.mblTelno.replace(/-/g, ''); // 하이픈 제거
+
+      // 전화 번호
+      if(this.mbrVO.telno != null) {
+        data.telno = this.mbrVO.telno.replace(/-/g, "");
+      }
+
       // 이메일
       data.eml = this.emailSum();
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -114,23 +114,25 @@
114	114
115	115	// 휴대폰번호
116	116	validateMblNo(key) {
117		- if (this.isEmpty(key)) {
	117	+ const raw = key.replace(/-/g, ''); // 하이픈 제거
	118	+
	119	+ if (this.isEmpty(raw)) {
118	120	alert("휴대폰번호를 입력하세요.");
119	121	this.$refs.mblTelno.focus();
120	122	return false;
121	123	} // 입력 여부
122		- if (!this.minLength(key, 10)) {
	124	+ if (!this.minLength(raw, 10)) {
123	125	alert("휴대폰번호는 10자 이상으로 입력하세요.");
124	126	this.$refs.mblTelno.focus();
125	127	return false;
126	128	} // 최소 길이
127		- if (!this.maxLength(key, 11)) {
	129	+ if (!this.maxLength(raw, 11)) {
128	130	alert("휴대폰번호는 11자 이하로 입력하세요.");
129	131	this.$refs.mblTelno.focus();
130	132	return false;
131	133	} // 최대 길이
132	134	const telRegex = /^01[016789][0-9]{3,4}[0-9]{4}$/;
133		- if(!telRegex.test(key)) {
	135	+ if(!telRegex.test(raw)) {
134	136	alert("휴대폰번호 형식이 맞지 않습니다.");
135	137	this.$refs.mblTelno.focus();
136	138	return false;

...	...	@@ -45,17 +45,19 @@
45	45	" />
46	46	</div>
47	47	<!-- <template v-if="showOpt.isMblNo \|\| showOpt.isTelNo"> -->
48		- <div v-if="showOpt.isMblNo" class="layout">
49		- <label class="form-title"><span>*</span>휴대폰번호</label>
50		- <input type="text" class="form-control sm" ref="mblTelno" v-model="mbrVO.mblTelno" minlength="10"
51		- maxlength="11" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
52		- placeholder="휴대폰번호를 입력하세요." />
53		- </div>
	48	+ <div v-if="showOpt.isMblNo" class="layout">
	49	+ <label class="form-title"><span>*</span>휴대폰번호</label>
	50	+ <input type="text" class="form-control sm" ref="mblTelno" v-model="mbrVO.mblTelno"
	51	+ @input="inputFormatPhone"
	52	+ maxlength="13"
	53	+ placeholder="휴대폰번호를 입력하세요." />
	54	+ </div>
54	55	<!-- </template> -->
55	56	<div v-if="showOpt.isTelNo" class="layout">
56	57	<label class="form-title">전화번호</label>
57	58	<input type="text" class="form-control sm" ref="telno" v-model="mbrVO.telno"
58		- oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)/g, '');"
	59	+ @input="inputFormatTel"
	60	+ maxlength="13"
59	61	placeholder="전화번호를 입력해주세요." />
60	62	</div>
61	63	<!-- <template v-if="showOpt.isEml \|\| showOpt.isSmsAgree \|\| showOpt.isEmlAgree"> -->
...	...	@@ -293,16 +295,32 @@
293	295	},
294	296	// 표기변경
295	297	changeFormat() {
296		- // 휴대폰 번호
297		- let mblNo = this.mbrVO.mblTelno;
298		- if (mblNo != null) {
299		- this.mbrVO.mblTelno = mblNo.replace(/[^0-9]/g, "");
	298	+ // 휴대폰번호 포맷
	299	+ const mbl = this.mbrVO.mblTelno?.replace(/[^0-9]/g, '') \|\| '';
	300	+ if (mbl.length === 10) {
	301	+ this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
	302	+ } else if (mbl.length === 11) {
	303	+ this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
300	304	}
301		- // 전화번호
302		- let telNo = this.mbrVO.telno;
303		- if (telNo != null) {
304		- this.mbrVO.telno = telNo.replace(/[^0-9]/g, "");
	305	+
	306	+ // 전화번호 포맷
	307	+ const tel = this.mbrVO.telno?.replace(/[^0-9]/g, '') \|\| '';
	308	+ if (tel.startsWith('02')) {
	309	+ // 서울 지역번호 (2자리)
	310	+ if (tel.length === 9) {
	311	+ this.mbrVO.telno = tel.replace(/(\d{2})(\d{3})(\d{4})/, '$1-$2-$3');
	312	+ } else if (tel.length === 10) {
	313	+ this.mbrVO.telno = tel.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');
	314	+ }
	315	+ } else {
	316	+ // 나머지 지역번호 (3자리)
	317	+ if (tel.length === 10) {
	318	+ this.mbrVO.telno = tel.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
	319	+ } else if (tel.length === 11) {
	320	+ this.mbrVO.telno = tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
	321	+ }
305	322	}
	323	+
306	324	// 이메일
307	325	if (this.mbrVO.eml != null) {
308	326	const email = this.mbrVO.eml.split("@");
...	...	@@ -319,6 +337,52 @@
319	337	this.email.select = "self";
320	338	this.email.address = email[1];
321	339	break;
	340	+ }
	341	+ }
	342	+ },
	343	+
	344	+ // 휴대폰 번호 입력 포맷
	345	+ inputFormatPhone(event) {
	346	+ let input = event.target.value.replace(/[^0-9]/g, '');
	347	+
	348	+ if (input.length <= 3) {
	349	+ this.mbrVO.mblTelno = input;
	350	+ } else if (input.length <= 6) {
	351	+ this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3);
	352	+ } else if (input.length === 10) {
	353	+ // 10자리는 3-3-4
	354	+ this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
	355	+ } else {
	356	+ // 기본은 3-4-4
	357	+ this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
	358	+ }
	359	+ },
	360	+
	361	+ // 전화번호 입력 포맷
	362	+ inputFormatTel(event) {
	363	+ let input = event.target.value.replace(/[^0-9]/g, '');
	364	+
	365	+ if (input.startsWith('02')) {
	366	+ // 서울 지역번호 (2자리)
	367	+ if (input.length <= 2) {
	368	+ this.mbrVO.telno = input;
	369	+ } else if (input.length <= 5) {
	370	+ this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2);
	371	+ } else if (input.length <= 9) {
	372	+ this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 5) + '-' + input.slice(5);
	373	+ } else {
	374	+ this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 6) + '-' + input.slice(6, 10);
	375	+ }
	376	+ } else {
	377	+ // 나머지 지역번호 (3자리)
	378	+ if (input.length <= 3) {
	379	+ this.mbrVO.telno = input;
	380	+ } else if (input.length <= 6) {
	381	+ this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3);
	382	+ } else if (input.length <= 10) {
	383	+ this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
	384	+ } else {
	385	+ this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
322	386	}
323	387	}
324	388	},
...	...	@@ -411,6 +475,14 @@
411	475	data.pswd = null;
412	476	}
413	477
	478	+ // 휴대폰 번호
	479	+ data.mblTelno = this.mbrVO.mblTelno.replace(/-/g, ''); // 하이픈 제거
	480	+
	481	+ // 전화 번호
	482	+ if(this.mbrVO.telno != null) {
	483	+ data.telno = this.mbrVO.telno.replace(/-/g, "");
	484	+ }
	485	+
414	486	// 이메일
415	487	data.eml = this.emailSum();
416	488

Delete comment