feat: add user registration page with form validation and API integration.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s

This commit is contained in:
supalerk-ar66 2026-02-11 10:21:58 +07:00
parent 025084b2bf
commit 7b7f44620d

View file

@ -103,13 +103,9 @@ const onUsernameInput = (val: string | number | null) => {
}; };
const onPhoneInput = (val: string | number | null) => { const onPhoneInput = (val: string | number | null) => {
const value = String(val || '') const value = String(val || '').replace(/\D/g, '').slice(0, 10)
registerForm.phone = value; registerForm.phone = value;
if (/\D/.test(value)) { if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
} else {
if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
}
}; };
const onEmailInput = (val: string | number | null) => { const onEmailInput = (val: string | number | null) => {
@ -315,6 +311,7 @@ const handleRegister = async () => {
:value="registerForm.phone" :value="registerForm.phone"
@input="(e) => onPhoneInput((e.target as HTMLInputElement).value)" @input="(e) => onPhoneInput((e.target as HTMLInputElement).value)"
type="tel" 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="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}" :class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.phone}"
/> />