feat: implement user registration page with form validation, authentication integration, and Quasar notifications.

Frontend-Learner/pages/auth/register.vue

@@ -103,13 +103,40 @@ const onUsernameInput = (val: string | number | null) => {
   }
 };
 
-const onPhoneInput = (val: string | number | null) => {
+const onPhoneInput = (e: Event) => {
-  const value = String(val || '')
+  const input = e.target as HTMLInputElement
-  registerForm.phone = value;
+  let value = input.value
-  if (/\D/.test(value)) {
+  
-    errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
+  // กรองทุกอย่างที่ไม่ใช่ตัวเลขออกทันที (เผื่อการ Copy-Paste)
-  } else {
+  value = value.replace(/\D/g, '')
-    if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
+  
+  // จำกัดไม่เกิน 10 หลัก
+  if (value.length > 10) {
+    value = value.substring(0, 10)
+  }
+  
+  // เขียนค่าที่กรองแล้วกลับลงไปที่ Input ทันทีเพื่อไม่ให้เห็นตัวอักษร
+  input.value = value
+  registerForm.phone = value
+  
+  // ล้าง error ทันทีถ้าถูกต้อง
+  if (value.length <= 10) {
+    clearFieldError('phone');
+  }
+};
+
+const onPhoneKeydown = (e: KeyboardEvent) => {
+  // อนุญาตให้กดปุ่มควบคุมต่างๆ ได้ เช่น Backspace, Tab, Enter, ลูกศร
+  const controlKeys = ['Backspace', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'Delete', 'v', 'c', 'a'];
+  
+  // เช็คว่าเป็นการกด Ctrl/Command + Key หรือเปล่า (เช่น Ctrl+V)
+  if (e.ctrlKey || e.metaKey) {
+    if (controlKeys.includes(e.key.toLowerCase())) return;
+  }
+
+  // ถ้าไม่ใช่ปุ่มควบคุม และไม่ใช่ตัวเลข ให้ยกเลิกการพิมพ์
+  if (!controlKeys.includes(e.key) && !/^\d$/.test(e.key)) {
+    e.preventDefault();
   }
 };
 
@@ -325,8 +352,10 @@ const handleRegister = async () => {
               </div>
               <input
                 :value="registerForm.phone"
-                @input="(e) => onPhoneInput((e.target as HTMLInputElement).value)"
+                @input="onPhoneInput"
+                @keydown="onPhoneKeydown"
                 type="tel"
+                maxlength="10"
                 class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
                 :class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.phone}"
               />