Add:Login validation & error alerts for user safety

This commit is contained in:
supalerk-ar66 2026-01-15 10:19:43 +07:00
parent bb80b8a419
commit 3c86933dee
6 changed files with 25 additions and 12 deletions

View file

@ -1 +1 @@
{"id":"dev","timestamp":1768446829065} {"id":"dev","timestamp":1768447040644}

View file

@ -1 +1 @@
{"id":"dev","timestamp":1768446829065,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]} {"id":"dev","timestamp":1768447040644,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

View file

@ -1,5 +1,5 @@
{ {
"date": "2026-01-15T03:13:56.323Z", "date": "2026-01-15T03:17:28.679Z",
"preset": "nitro-dev", "preset": "nitro-dev",
"framework": { "framework": {
"name": "nuxt", "name": "nuxt",
@ -9,9 +9,9 @@
"nitro": "2.12.8" "nitro": "2.12.8"
}, },
"dev": { "dev": {
"pid": 23116, "pid": 28528,
"workerAddress": { "workerAddress": {
"socketPath": "\\\\.\\pipe\\nitro-worker-23116-1-1-1366.sock" "socketPath": "\\\\.\\pipe\\nitro-worker-28528-1-1-6605.sock"
} }
} }
} }

View file

@ -1,8 +1,8 @@
/// <reference types="quasar" /> /// <reference types="quasar" />
/// <reference types="@nuxtjs/tailwindcss" /> /// <reference types="@nuxtjs/tailwindcss" />
/// <reference types="@nuxt/telemetry" />
/// <reference types="nuxt-quasar-ui" /> /// <reference types="nuxt-quasar-ui" />
/// <reference types="@nuxt/devtools" /> /// <reference types="@nuxt/devtools" />
/// <reference types="@nuxt/telemetry" />
/// <reference path="types/builder-env.d.ts" /> /// <reference path="types/builder-env.d.ts" />
/// <reference types="nuxt" /> /// <reference types="nuxt" />
/// <reference path="types/app-defaults.d.ts" /> /// <reference path="types/app-defaults.d.ts" />

View file

@ -1,4 +1,4 @@
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 15/1/2569 10:13:50 // generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 15/1/2569 10:17:22
import "@nuxtjs/tailwindcss/config-ctx" import "@nuxtjs/tailwindcss/config-ctx"
import configMerger from "@nuxtjs/tailwindcss/merger"; import configMerger from "@nuxtjs/tailwindcss/merger";

View file

@ -30,7 +30,11 @@ const loginForm = reactive({
// Validation rules definition // Validation rules definition
const loginRules = { const loginRules = {
email: { email: {
rules: { required: true, email: true }, rules: {
required: true,
email: true,
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
},
label: 'อีเมล', label: 'อีเมล',
messages: { messages: {
required: 'กรุณากรอกอีเมลของคุณ', required: 'กรุณากรอกอีเมลของคุณ',
@ -38,7 +42,11 @@ const loginRules = {
} }
}, },
password: { password: {
rules: { required: true, minLength: 8 }, rules: {
required: true,
minLength: 8,
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
},
label: 'รหัสผ่าน', label: 'รหัสผ่าน',
messages: { messages: {
required: 'กรุณากรอกรหัสผ่าน', required: 'กรุณากรอกรหัสผ่าน',
@ -55,9 +63,14 @@ const loginRules = {
* Handles input updates, stripping Thai characters and clearing errors. * Handles input updates, stripping Thai characters and clearing errors.
*/ */
const handleInput = (field: keyof typeof loginForm, value: string) => { const handleInput = (field: keyof typeof loginForm, value: string) => {
// Remove Thai characters range \u0E00-\u0E7F loginForm[field] = value
loginForm[field] = value.replace(/[\u0E00-\u0E7F]/g, '') if (/[\u0E00-\u0E7F]/.test(value)) {
clearFieldError(field) errors.value[field] = 'ห้ามใส่ภาษาไทย'
} else {
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
clearFieldError(field)
}
}
} }
const handleLogin = async () => { const handleLogin = async () => {