Validation
- React Native kursu
- Orta seviye
- Ders 32/116
- 5 dk
Form validation öğrenirsin.
Doğrulama nedir?
Doğrulama (validation), kullanıcının girdiği verinin koşullara uygun olup olmadığını kontrol etmektir. Örneğin e-posta adresinde @ işareti olmalı; parola en az 8 karakter olmalı. Doğrulama başarısız olursa bir hata mesajı gösterirsin.
React Native'de doğrulama için ayrı bir state tutarsın: const [errors, setErrors] = useState({});. Doğrulama fonksiyonu her alanı kontrol eder ve hata nesnesini doldurur. Örnek: if (!form.email.includes("@")) setErrors({ ...errors, email: "Geçersiz e-posta" });. Hata varsa ekranda kırmızı bir Text ile gösterirsin. Doğrulama genelde gönderme öncesinde yapılır; ama her tuşa basışta da çalıştırılabilir. Bu, kullanıcıyı anında geri bildirimle yönlendirir.
Hata gösterimi
Doğrulama hatası bulduğunda onu ekranda gösterirsin. Tipik desen: hatayı kırmızı Text ile girdinin altında göstermek. Bunu yapmak için koşullu render kullanırsın: {errors.email ? <Text style={{ color: "red" }}>{errors.email}</Text> : null}.
Burada errors.email doğruysan hata metnini gösterirsin; değilse null döner ve hiçbir şey çizilmez. Bu desen hem formun temiz kalmasını sağlar hem de kullanıcıya net bir geri bildirim verir. Doğrulama hatasızsa alan boş görünür. Birden çok alan için her birine aynı deseni tekrarlarsın. Hata mesajları kısa ve net olmalı; teknik terim yerine günlük dil kullan.
Uygulama E-posta doğrulama ekle
Bir EmailForm bileşeni yaz. useState ile email ve errors state'ini başlat (ikisi de boş). validate fonksiyonu yaz: email.includes("@") değilse setErrors({ email: "Geçersiz e-posta" }) yapsın. TextInput'un onChangeText'inde hem setEmail'i çağır hem validate'i çağır. errors.email varsa kırmızı Text ile göster.
Başlangıç kodu
// useState ve Text, TextInput'u içe aktar
function EmailForm() {
// email ve errors state'ini başlat (ikisi de boş)
// validate fonksiyonu: e-posta kontrolü yapıp hatayı setErrors ile yaz
return null;
}Örnek çözüm
import { useState } from "react";
import { Text, TextInput } from "react-native";
function EmailForm() {
const [email, setEmail] = useState("");
const [errors, setErrors] = useState({});
function validate(value) {
if (!value.includes("@")) {
setErrors({ email: "Geçersiz e-posta" });
} else {
setErrors({});
}
}
return (
<>
<TextInput
value={email}
onChangeText={(t) => { setEmail(t); validate(t); }}
placeholder="E-posta"
/>
{errors.email ? <Text style={{ color: "red" }}>{errors.email}</Text> : null}
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
errors |
Hata nesnesi |
setErrors |
Hataları günceller |
includes("@") |
E-posta kontrolü |
validation |
Kural kontrolü |
2 Doğrulama hatası ekranda nasıl gösterilir?
{errors.email ? <Text style={{ color: "red" }}>{errors.email}</Text> : null}- Yeşil Text ile
- Alert ile her zaman
- Console.log ile
- Koşullu render ile (errors.email ? ... : null) Doğru cevap
Açıklama: Koşullu render ile hata varsa gösterilir, yoksa null döner.
3 E-posta kontrolünü yaz
if (!email____("@")) setErrors({ email: "Geçersiz e-posta" });if (!email.includes("@")) setErrors({ email: "Geçersiz e-posta" });Açıklama: .includes("@") ile @ işaretini ararsın.