전화번호

src/components/user/RegisterForm.vue

@@ -143,11 +143,13 @@
                 name="phone"
                 :isEssential="true"
                 :is-alert="phoneAlert"
-                @update:data="phone = $event.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')"
+                @update:data="phone = $event"
                 @update:alert="phoneAlert = $event"
                 @blur="checkPhoneDuplicate"
                 :maxlength="11"
                 :value="phone"
+                @keypress="onlyNumber"
+
             />
             <span v-if="phoneError" class="invalid-feedback d-block">{{ phoneError }}</span>
 
@@ -160,7 +162,7 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+    import { ref, watch } from 'vue';
     import $api from '@api';
     import commonApi from '@/common/commonApi'
     import UserFormInput from '@c/input/UserFormInput.vue';
@@ -319,10 +321,16 @@
         await checkColorDuplicate();
     }
 
+    const onlyNumber = (event) => {
+        // 숫자가 아니면 입력 차단
+        if (!/^[0-9]$/.test(event.key)) {
+            event.preventDefault();
+        }
+    };
+
 
     // 회원가입
     const handleSubmit = async () => {
-
         await checkColorDuplicate();
 
         idAlert.value = id.value.trim() === '';
@@ -334,6 +342,12 @@
         addressAlert.value = address.value.trim() === '';
         phoneAlert.value = phone.value.trim() === '';
 
+        if (!/^\d+$/.test(phone.value)) {
+            phoneAlert.value = true;
+        } else {
+            phoneAlert.value = false;
+        }
+
         // 프로필 이미지 체크
         if (!profile.value) {
             profilerr.value = '프로필 이미지를 선택해주세요.';