Add: Register validation & error alerts for user safety

Frontend-Learner/pages/auth/register.vue

@@ -34,21 +34,118 @@ const registerForm = reactive({
 
 // Validation rules
 const registerRules = {
-  username: { rules: { required: true, minLength: 4 }, label: "ชื่อผู้ใช้" },
-  firstName: { rules: { required: true, minLength: 2 }, label: "ชื่อ" },
-  lastName: { rules: { required: true, minLength: 2 }, label: "นามสกุล" },
+  username: { 
+    rules: { 
+      required: true, 
+      minLength: 4,
+      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
+    }, 
+    label: "ชื่อผู้ใช้" 
+  },
+  firstName: { 
+    rules: { 
+      required: true, 
+      minLength: 2,
+      custom: (val: string) => /\d/.test(val) ? 'ห้ามใส่ตัวเลข' : null
+    }, 
+    label: "ชื่อ" 
+  },
+  lastName: { 
+    rules: { 
+      required: true, 
+      minLength: 2,
+      custom: (val: string) => /\d/.test(val) ? 'ห้ามใส่ตัวเลข' : null
+    }, 
+    label: "นามสกุล" 
+  },
   phone: {
-    rules: { required: true, pattern: /^0[0-9]{8,9}$/ },
+    rules: { 
+      required: true, 
+      pattern: /^0[0-9]{8,9}$/,
+      custom: (val: string) => /\D/.test(val) ? 'กรุณากรอกเฉพาะตัวเลข' : null
+    },
     label: "เบอร์โทรศัพท์",
   },
-  email: { rules: { required: true, email: true }, label: "อีเมล" },
-  password: { rules: { required: true, minLength: 8 }, label: "รหัสผ่าน" },
+  email: { 
+    rules: { 
+      required: true, 
+      email: true,
+      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null 
+    }, 
+    label: "อีเมล" 
+  },
+  password: { 
+    rules: { 
+      required: true, 
+      minLength: 8,
+      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null 
+    }, 
+    label: "รหัสผ่าน" 
+  },
   confirmPassword: {
     rules: { required: true, match: "password" },
     label: "ยืนยันรหัสผ่าน",
   },
 };
 
+const onUsernameInput = (val: string) => {
+  registerForm.username = val;
+  if (/[\u0E00-\u0E7F]/.test(val)) {
+    errors.value.username = 'ห้ามใส่ภาษาไทย';
+  } else {
+    // Only clear if the error is specifically about Thai chars, 
+    // otherwise we might clear minLength errors undesirably
+    if (errors.value.username === 'ห้ามใส่ภาษาไทย') {
+      clearFieldError('username');
+    }
+  }
+};
+
+const onPhoneInput = (val: string) => {
+  registerForm.phone = val;
+  if (/\D/.test(val)) {
+    errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
+  } else {
+    if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
+  }
+};
+
+const onEmailInput = (val: string) => {
+  registerForm.email = val;
+  if (/[\u0E00-\u0E7F]/.test(val)) {
+    errors.value.email = 'ห้ามใส่ภาษาไทย';
+  } else {
+    if (errors.value.email === 'ห้ามใส่ภาษาไทย') clearFieldError('email');
+  }
+};
+
+const onPasswordInput = (val: string) => {
+  registerForm.password = val;
+  if (/[\u0E00-\u0E7F]/.test(val)) {
+    errors.value.password = 'ห้ามใส่ภาษาไทย';
+  } else {
+    if (errors.value.password === 'ห้ามใส่ภาษาไทย') clearFieldError('password');
+  }
+};
+
+const onFirstNameInput = (val: string) => {
+  registerForm.firstName = val;
+  if (/\d/.test(val)) {
+    errors.value.firstName = 'ห้ามใส่ตัวเลข';
+  } else {
+    if (errors.value.firstName === 'ห้ามใส่ตัวเลข') clearFieldError('firstName');
+  }
+};
+
+const onLastNameInput = (val: string) => {
+  registerForm.lastName = val;
+  if (/\d/.test(val)) {
+    errors.value.lastName = 'ห้ามใส่ตัวเลข';
+  } else {
+    if (errors.value.lastName === 'ห้ามใส่ตัวเลข') clearFieldError('lastName');
+  }
+};
+
 const handleRegister = async () => {
   if (!validate(registerForm, registerRules)) return;
 
@@ -106,36 +203,36 @@ const handleRegister = async () => {
     <form @submit.prevent="handleRegister">
         <!-- Username -->
       <FormInput
-        v-model="registerForm.username"
+        :model-value="registerForm.username"
         label="ชื่อผู้ใช้"
         placeholder="username"
         :error="errors.username"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('username')"
+        @update:model-value="onUsernameInput"
       />
        <!-- Email -->
        <FormInput
-        v-model="registerForm.email"
+        :model-value="registerForm.email"
         label="อีเมล"
         type="email"
         placeholder="student@example.com"
         :error="errors.email"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('email')"
+        @update:model-value="onEmailInput"
       />
 
       <!-- Password Fields -->
       <FormInput
-        v-model="registerForm.password"
+        :model-value="registerForm.password"
         label="รหัสผ่าน"
         type="password"
         placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
         :error="errors.password"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('password')"
+        @update:model-value="onPasswordInput"
       />
 
       <FormInput
@@ -165,36 +262,36 @@ const handleRegister = async () => {
         </div>
         <div class="col-span-8">
           <FormInput
-            v-model="registerForm.firstName"
+            :model-value="registerForm.firstName"
             label="ชื่อ"
             placeholder=""
             :error="errors.firstName"
             required
             class="dark-form-input"
-            @update:model-value="clearFieldError('firstName')"
+            @update:model-value="onFirstNameInput"
           />
         </div>
       </div>
 
       <FormInput
-        v-model="registerForm.lastName"
+        :model-value="registerForm.lastName"
         label="นามสกุล"
         placeholder=""
         :error="errors.lastName"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('lastName')"
+        @update:model-value="onLastNameInput"
       />
 
       <FormInput
-        v-model="registerForm.phone"
+        :model-value="registerForm.phone"
         label="เบอร์โทรศัพท์"
         type="tel"
         placeholder=""
         :error="errors.phone"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('phone')"
+        @update:model-value="onPhoneInput"
       />
 
       <!-- Submit Button -->