Vue uygulamasında form doğrulama: elle yazımdan composable'a

Form doğrulamada neyi çözüyoruz?

Form doğrulama, kullanıcının girdiği verinin beklenen biçimde olup olmadığını göndermeden önce kontrol etmek ve hatayı anlaşılır biçimde göstermektir. Burada birbirinden ayrı sorular vardır: Alan geçerli mi? Hata ne zaman gösterilecek? Form gönderilebilir mi? Kullanıcıyı yormayan bir form bu soruların her birine bilinçli yanıt verir.

Ön yüz doğrulaması kullanıcı deneyimi içindir: hatayı hemen gösterir, gereksiz istek göndermez. Güvenlik içinse yetkili tek doğrulama sunucudadır; ön yüzden geçen bir değer sunucuda yeniden doğrulanmalıdır.

Bağlama: v-model ve değiştiriciler

Vue'da form alanları v-model ile bir ref'e bağlanır. Dokümantasyonda anlatılan değiştiriciler doğrulama için işe yarar: v-model.trim kullanıcının başına ve sonuna eklediği boşlukları siler, v-model.lazy ise değeri her tuş vuruşunda değil, alandan çıkıldığında eşitler. İkincisi, kullanıcı daha yazarken hata göstermemek için işe yarar.

<script setup> import { ref } from 'vue'

const eposta = ref('') const sifre = ref('') </script>

<template> <form @submit.prevent="gonder" novalidate> <input v-model.trim="eposta" type="email" /> <input v-model="sifre" type="password" /> <button type="submit">Kaydol</button> </form> </template>

submit.prevent sayfanın yeniden yüklenmesini engeller; novalidate tarayıcının kendi doğrulama balonlarını kapatır ve hata gösterimini sizin kontrolünüze verir.

Elle doğrulama: computed ile hata mesajları

Birkaç alanlı bir form için ek kütüphane gerekmeden hata mesajları computed ile türetilebilir:

import { ref, computed } from 'vue'

const eposta = ref('') const sifre = ref('') const denendi = ref(false)

const epostaHata = computed(() => { if (!eposta.value) return 'E-posta gerekli' if (!eposta.value.includes('@')) return 'Geçerli bir e-posta girin' return '' }) const sifreHata = computed(() => sifre.value ? '' : 'Şifre gerekli' ) const formGecerli = computed(() => !epostaHata.value && !sifreHata.value)

function gonder() { denendi.value = true if (!formGecerli.value) return // sunucuya gönder }

Şablonda hata yalnızca denendi.value doğruysa gösterilir. Bu, kullanıcı daha yazmaya başlamadan kırmızı hata görmesini engeller. Alan bazında "dokunuldu" bilgisi tutmak daha incedir: kullanıcı bir alandan çıkınca o alanın hatası görünür, bütün form ise gönder tuşuna basıldığında kontrol edilir.

Hata ne zaman gösterilmeli?

En sık yapılan kullanıcı deneyimi hatası, kullanıcı henüz yazmayı bitirmeden hata göstermektir. Önerilen düzen: alan ilk kez terk edildiğinde göster, hata göründükten sonra her değişiklikte güncelle, göndermeye basıldığında tüm alanları doğrula ve ilk hatalı alana odaklan.

Hata mesajı ne yapılması gerektiğini söylemelidir. "Geçersiz değer" yerine "Telefon numarasını alan kodu ile yazın" gibi bir mesaj kullanıcıyı yönlendirir. Mesaj alanın hemen altında olmalı ve ekran okuyucular için alana bağlanmalıdır: aria-invalid işareti ve aria-describedby ile hata metninin kimliği. Yalnızca renkle belirtilen hatalar, renk körü kullanıcılar için görünmez kalır; renge ek olarak metin kullanın.

Yeniden kullanılabilir alan doğrulaması

Aynı kurallar birçok formda tekrarlanıyorsa mantığı bir composable'a çıkarın:

export function useAlan(baslangic, kurallar) { const deger = ref(baslangic) const dokunuldu = ref(false) const hata = computed(() => { for (const kural of kurallar) { const mesaj = kural(deger.value) if (mesaj) return mesaj } return '' }) return { deger, dokunuldu, hata } }

Kurallar, değeri alıp hata metni ya da boş metin döndüren basit fonksiyonlardır: gerekli, en az uzunluk, e-posta biçimi. Böylece tek alanı tek satırda tanımlarsınız. Form düzeyindeki geçerlilik de alanların hepsinin hata durumuna bakarak türetilir.

Form sayısı arttıkça ya da kurallar karmaşıklaştıkça şema tabanlı doğrulama kütüphaneleri düşünülebilir; vee-validate bu amaçla Vue ekosisteminde yaygın bilinen bir seçenektir. Kütüphane seçmeden önce elle yazılan kuralların bakım maliyetine bakın: birkaç alanlı bir form için kütüphane eklemek çoğu zaman gereksiz bağımlılıktır.

Sunucu hataları ve asenkron doğrulama

Bazı kontroller yalnızca sunucuda yapılabilir: e-postanın zaten kayıtlı olması, kullanıcı adının uygun olması. Bu kontrolleri alandan çıkıldığında asenkron çalıştırın, sonucu bekleyen kısa bir yükleme göstergesiyle bildirin ve her tuş vuruşunda istek göndermeyin. Sunucu göndermeden sonra alan bazlı hata döndürürse, bu hataları ilgili alanın altında gösterin; genel bir hata mesajıyla kullanıcıyı yanıtsız bırakmayın.

Gönderme sırasında tuşu devre dışı bırakın. Aksi halde kullanıcı çift tıklayarak aynı formu tekrar tekrar gönderebilir. İşlem bitince tuşu etkinleştirin ve başarıyı net biçimde bildirin.

Sık yapılan hatalar

• İlk açılışta tüm alanları hatalı göstermek: kullanıcı henüz hiçbir şey yazmadı.
• Her tuş vuruşunda sunucu isteği göndermek: yük ve titreme yaratır.
• Yalnızca ön yüzde doğrulamak: sunucu aynı kuralları yeniden uygulamalıdır.
• Hatayı yalnızca renkle göstermek: erişilebilirlik kaybolur.
• Tuşu hiç devre dışı bırakmamak: çift gönderim olur; ama tuşu form geçerli olana dek kilitli tutmak da kullanıcıya nedenini söylemez, bu yüzden hata mesajı gösterin.
• E-posta biçimini aşırı katı kurallarla doğrulamak: geçerli adresleri reddedebilirsiniz; gerçek doğrulama onay e-postasıdır.

Mindset programlarında nerede çalışılır?

Vue.js 3 ve Composition API ile Uygulama Geliştirme eğitimindeki formlar, doğrulama ve kullanıcı deneyimi modülü, bu sayfadaki konunun uygulamalı karşılığıdır; reaktivite, kompozisyon fonksiyonları ve bileşen iletişimi modülleri de form mantığını yeniden kullanılabilir kılmanın temelini verir.

Kayıt, sipariş ya da başvuru formları gibi çok sayıda formu olan kurumsal ürünlerde ortak bir doğrulama yaklaşımı belirlemek, tutarlı kullanıcı deneyimi ve daha az hata demektir. Ekibinize özel bir uygulama çalıştayı için kurumsal eğitim talebi üzerinden iletişime geçebilirsiniz.