Commit @9c3e0992c02122d97fbfc85f2d88f2621eb29fd5

류윤주 2023-11-29

231129 이세현 관리자 회원가입 유효성 검사

@9c3e0992c02122d97fbfc85f2d88f2621eb29fd5

0b74e62

9c3e099

client/views/pages/admin/user/UserSelectList.vue

--- client/views/pages/admin/user/UserSelectList.vue

+++ client/views/pages/admin/user/UserSelectList.vue


                 </div>
                 <div v-show="modalType == 'userInsert'" class="modal-content-monthly">
                     <div class="flex">
-                        <input type="text" placeholder="ID" v-model="mngr.mngr_id" class="id-input" />
-                        <button type="button" class="idchk blue-btn" @click="idChcek">중복확인</button>
+                        <input type="text" placeholder="ID" v-model="mngr.mngr_id" class="id-input" ref="mngr_id"/>
+                        <button type="button" class="idchk blue-btn" @click="idCheck">중복확인</button>
                     </div>
-                    <div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw"
+                    <div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw" ref="mngr_pw"
                             @change="passwordSyncCheck()" /></div>
                     <div>
-                        <input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck"
+                        <input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck" ref="mngr_pwCheck"
                             @change="passwordSyncCheck()" />
                         <div v-if="this.passwordCheckFlag" style="color:rgb(0, 198, 60); display:block" class="warning">비밀번호
                             일치</div>
                         <div v-else style="color:red; display:block" class="warning">비밀번호 불일치</div>
                     </div>
-                    <div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" /></div>
+                    <div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" ref="mngr_nm" /></div>
                     <div class="flex">
-                        <input type="text" v-model="email_id" placeholder="email">
+                        <input type="text" v-model="email_id" placeholder="email" ref="email_id">
                         <div class="at">@</div>
-                        <input class="mail-input" type="text" v-model="email_domain" :disabled="email_disabled === true">
+                        <input class="mail-input" type="text" v-model="email_domain" :disabled="email_disabled === true" ref="email_domain">
                         <select @change="emailValue($event.target.value)" class="mail-select">
                             <option selected disabled>선택하세요</option>
                             <option value="naver.com">naver.com</option>

             passwordCheck: null,
             passwordCheckFlag: false,
             //아이디 중복
-            idChcek_boolean: false,
+            idCheck_boolean: false,
 
             //이메일
             email_disabled: true,

 
         //비밀번호 매칭 확인
         passwordSyncCheck: function () {
-            if (this.mngr.mngr_pw != this.passwordCheck) this.passwordCheckFlag = false;
-            else this.passwordCheckFlag = true;
+            if (this.mngr.mngr_pw != this.passwordCheck) {
+                this.passwordCheckFlag = false;
+            } else { this.passwordCheckFlag = true; }
         },
         //ID 중복 검사
-        idChcek: function () {
+        idCheck: function () {
             const vm = this;
             axios({
                 url: '/managerSelectOne.json',

                 // console.log("idCheck - response : ", response.data);
                 if (response.data != null) {
                     alert("중복된 ID 입니다.");
-                    vm.idChcek_boolean = false;
+                    vm.idCheck_boolean = false;
                     return false;
                 } else {
                     alert("사용가능한 ID 입니다.");
-                    vm.idChcek_boolean = true;
+                    vm.idCheck_boolean = true;
                     return true;
                 }
             }).catch(function (error) {
                 console.log("idCheck - error : ", error);
                 alert("중복검사 오류, 다시 시도해주세요.");
-                vm.idChcek_boolean = false;
+                vm.idCheck_boolean = false;
             });
         },
 

         managerInsertCheck: function () {
             if (COMMON_UTIL.isEmpty(this.mngr.mngr_id) === false) {
                 alert('ID를 입력해주세요.');
+                this.$refs.mngr_id.focus()
                 return false;
             }
 
-            if (this.idChcek_boolean === false) {
+            if (this.idCheck_boolean === false) {
                 alert("ID중복검사를 완료해주세요.")
+                this.$refs.mngr_id.focus()
+                return false;
+            }
+            console.log("this.mngr.mngr_pw",this.mngr.mngr_pw)
+            if (this.mngr.mngr_pw == '' || this.mngr.mngr_pw == null){
+                alert("비밀번호를 입력하세요.")
+                this.$refs.mngr_pw.focus()
                 return false;
             }
 
-            if (COMMON_UTIL.isEmpty(this.mngr.mngr_pw) === false) {
-                alert('비밀번호를 입력해주세요.');
+            if (this.passwordCheckFlag === false){
+                alert("비밀번호가 일치하지 않습니다.")
+                this.$refs.mngr_pwCheck.focus()
                 return false;
             }
 
             if (COMMON_UTIL.isEmpty(this.mngr.mngr_nm) === false) {
                 alert('이름을 입력해주세요.');
+                this.$refs.mngr_nm.focus()
                 return false;
             }
 
 
             if (COMMON_UTIL.isEmpty(this.email_id) === false) {
                 alert('이메일 ID를 입력해주세요.');
+                this.$refs.email_id.focus()
                 return false;
             }
 
             if (COMMON_UTIL.isEmpty(this.email_domain) === false) {
-                alert('이메일을 선택 혹은 입력해주세요.');
+                alert('도메인을 선택 혹은 입력해주세요.');
+                this.$refs.email_domain.focus()
                 return false;
             }
 

                 this.openModal();
             }
         },
+        "mngr.mngr_id": function(newVal, oldVal){
+            this.idCheck_boolean = false;
+            console.log("this.idCheck_boolean",this.idCheck_boolean)
+        }
+        
     },
     computed: {},
     components: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -110,23 +110,23 @@
110	110	</div>
111	111	<div v-show="modalType == 'userInsert'" class="modal-content-monthly">
112	112	<div class="flex">
113		- <input type="text" placeholder="ID" v-model="mngr.mngr_id" class="id-input" />
114		- <button type="button" class="idchk blue-btn" @click="idChcek">중복확인</button>
	113	+ <input type="text" placeholder="ID" v-model="mngr.mngr_id" class="id-input" ref="mngr_id"/>
	114	+ <button type="button" class="idchk blue-btn" @click="idCheck">중복확인</button>
115	115	</div>
116		- <div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw"
	116	+ <div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw" ref="mngr_pw"
117	117	@change="passwordSyncCheck()" /></div>
118	118	<div>
119		- <input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck"
	119	+ <input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck" ref="mngr_pwCheck"
120	120	@change="passwordSyncCheck()" />
121	121	<div v-if="this.passwordCheckFlag" style="color:rgb(0, 198, 60); display:block" class="warning">비밀번호
122	122	일치</div>
123	123	<div v-else style="color:red; display:block" class="warning">비밀번호 불일치</div>
124	124	</div>
125		- <div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" /></div>
	125	+ <div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" ref="mngr_nm" /></div>
126	126	<div class="flex">
127		- <input type="text" v-model="email_id" placeholder="email">
	127	+ <input type="text" v-model="email_id" placeholder="email" ref="email_id">
128	128	<div class="at">@</div>
129		- <input class="mail-input" type="text" v-model="email_domain" :disabled="email_disabled === true">
	129	+ <input class="mail-input" type="text" v-model="email_domain" :disabled="email_disabled === true" ref="email_domain">
130	130	<select @change="emailValue($event.target.value)" class="mail-select">
131	131	<option selected disabled>선택하세요</option>
132	132	<option value="naver.com">naver.com</option>
...	...	@@ -175,7 +175,7 @@
175	175	passwordCheck: null,
176	176	passwordCheckFlag: false,
177	177	//아이디 중복
178		- idChcek_boolean: false,
	178	+ idCheck_boolean: false,
179	179
180	180	//이메일
181	181	email_disabled: true,
...	...	@@ -237,11 +237,12 @@
237	237
238	238	//비밀번호 매칭 확인
239	239	passwordSyncCheck: function () {
240		- if (this.mngr.mngr_pw != this.passwordCheck) this.passwordCheckFlag = false;
241		- else this.passwordCheckFlag = true;
	240	+ if (this.mngr.mngr_pw != this.passwordCheck) {
	241	+ this.passwordCheckFlag = false;
	242	+ } else { this.passwordCheckFlag = true; }
242	243	},
243	244	//ID 중복 검사
244		- idChcek: function () {
	245	+ idCheck: function () {
245	246	const vm = this;
246	247	axios({
247	248	url: '/managerSelectOne.json',
...	...	@@ -255,17 +256,17 @@
255	256	// console.log("idCheck - response : ", response.data);
256	257	if (response.data != null) {
257	258	alert("중복된 ID 입니다.");
258		- vm.idChcek_boolean = false;
	259	+ vm.idCheck_boolean = false;
259	260	return false;
260	261	} else {
261	262	alert("사용가능한 ID 입니다.");
262		- vm.idChcek_boolean = true;
	263	+ vm.idCheck_boolean = true;
263	264	return true;
264	265	}
265	266	}).catch(function (error) {
266	267	console.log("idCheck - error : ", error);
267	268	alert("중복검사 오류, 다시 시도해주세요.");
268		- vm.idChcek_boolean = false;
	269	+ vm.idCheck_boolean = false;
269	270	});
270	271	},
271	272
...	...	@@ -284,32 +285,44 @@
284	285	managerInsertCheck: function () {
285	286	if (COMMON_UTIL.isEmpty(this.mngr.mngr_id) === false) {
286	287	alert('ID를 입력해주세요.');
	288	+ this.$refs.mngr_id.focus()
287	289	return false;
288	290	}
289	291
290		- if (this.idChcek_boolean === false) {
	292	+ if (this.idCheck_boolean === false) {
291	293	alert("ID중복검사를 완료해주세요.")
	294	+ this.$refs.mngr_id.focus()
	295	+ return false;
	296	+ }
	297	+ console.log("this.mngr.mngr_pw",this.mngr.mngr_pw)
	298	+ if (this.mngr.mngr_pw == '' \|\| this.mngr.mngr_pw == null){
	299	+ alert("비밀번호를 입력하세요.")
	300	+ this.$refs.mngr_pw.focus()
292	301	return false;
293	302	}
294	303
295		- if (COMMON_UTIL.isEmpty(this.mngr.mngr_pw) === false) {
296		- alert('비밀번호를 입력해주세요.');
	304	+ if (this.passwordCheckFlag === false){
	305	+ alert("비밀번호가 일치하지 않습니다.")
	306	+ this.$refs.mngr_pwCheck.focus()
297	307	return false;
298	308	}
299	309
300	310	if (COMMON_UTIL.isEmpty(this.mngr.mngr_nm) === false) {
301	311	alert('이름을 입력해주세요.');
	312	+ this.$refs.mngr_nm.focus()
302	313	return false;
303	314	}
304	315
305	316
306	317	if (COMMON_UTIL.isEmpty(this.email_id) === false) {
307	318	alert('이메일 ID를 입력해주세요.');
	319	+ this.$refs.email_id.focus()
308	320	return false;
309	321	}
310	322
311	323	if (COMMON_UTIL.isEmpty(this.email_domain) === false) {
312		- alert('이메일을 선택 혹은 입력해주세요.');
	324	+ alert('도메인을 선택 혹은 입력해주세요.');
	325	+ this.$refs.email_domain.focus()
313	326	return false;
314	327	}
315	328
...	...	@@ -485,6 +498,11 @@
485	498	this.openModal();
486	499	}
487	500	},
	501	+ "mngr.mngr_id": function(newVal, oldVal){
	502	+ this.idCheck_boolean = false;
	503	+ console.log("this.idCheck_boolean",this.idCheck_boolean)
	504	+ }
	505	+
488	506	},
489	507	computed: {},
490	508	components: {

Delete comment