Browse Source

fix: add double-submission guard, captcha ARIA labels, and error handling on mount

- Guard onSubmit against concurrent calls via loading flag
- Add role="img" and aria-label to captcha SVG container for accessibility
- Wrap initial captcha fetch in try/catch to show error toast on failure

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
feat/registration-page
npmrun 2 weeks ago
parent
commit
f1853b8fab
  1. 11
      app/pages/register.vue

11
app/pages/register.vue

@ -34,6 +34,7 @@ async function fetchCaptcha() {
} }
async function onSubmit() { async function onSubmit() {
if (loading.value) return
loading.value = true loading.value = true
try { try {
const res = await $fetch<{ code: number; message: string; data: unknown }>( const res = await $fetch<{ code: number; message: string; data: unknown }>(
@ -67,7 +68,13 @@ async function onSubmit() {
} }
} }
onMounted(fetchCaptcha) onMounted(async () => {
try {
await fetchCaptcha()
} catch {
toast.add({ title: '验证码加载失败,请刷新页面', color: 'error' })
}
})
</script> </script>
<template> <template>
@ -104,6 +111,8 @@ onMounted(fetchCaptcha)
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div <div
class="flex-1 h-10 border rounded-md overflow-hidden bg-[#f8f9fa]" class="flex-1 h-10 border rounded-md overflow-hidden bg-[#f8f9fa]"
role="img"
aria-label="CAPTCHA verification code"
v-html="captchaSvg" v-html="captchaSvg"
/> />
<UButton <UButton

Loading…
Cancel
Save