Required ve pattern

Tarayıcı tarafı doğrulama için required ve pattern kullanırsın.

İstemci tarafı doğrulama nedir?

Bir forma yanlış veri yazıldığında sunucuya gidip dönmesi yavaştır. İstemci tarafı doğrulama (client-side validation) tarayıcının form gönderilmeden önce alanları denetlemesidir. HTML bunu birkaç öznitelikle yapar: required boş bırakılmayı engeller, pattern girilen metnin bir düzene (regular expression) uymasını ister. Bu, sunucuya gereksiz isteklerin önünü keser; ama güvenlik için sunucu da denetlemelidir.

pattern ile biçim zorlama

pattern özniteliği bir düzenli ifade (regular expression) alır ve tarayıcı, girilen metnin bu desene uymasını ister. Örneğin pattern="[0-9]{5}" tam beş rakam, pattern="[A-Z]{2}-[0-9]{4}" iki büyük harf, tire ve dört rakam demektir. Desen eşleşmezse tarayıcı formu göndermez ve bir uyarı gösterir. title özniteliğiyle kullanıcıya beklenen biçimi kısaça söyleyebilirsin.

Uygulama Kayıt formuna zorunlu e-posta ve desenli telefon ekle

Aşağıdaki forma iki alan ekle:

Bir e-posta alanı (type="email"), zorunlu (required)
Bir telefon alanı (type="tel"), zorunlu ve pattern="[0-9]{10}" ile 10 rakama zorunlu

Her ikisinin de bir <label>'ı olsun; for ve id değerleri eşleşsin.

Örnek çözümü göster

<form action="/kayit" method="post">
  <label for="eposta">E-posta</label>
  <input type="email" id="eposta" required>
  <label for="telefon">Telefon</label>
  <input type="tel" id="telefon" pattern="[0-9]{10}" required>
</form>

Kendini test et

Bir input'a required eklemek ne sağlar?
```
<input type="text" required>
```
- Alanın boş bırakılamamasını
- Alanın yalnızca sayı kabul etmesini
- Alanın otomatik doldurulmasını
- Alanın gizlenmesini
Cevabı göster

Alanın boş bırakılamamasını — Doğru. required, alanın boş bırakıldığında formun gönderilmesini engeller.

Beş rakamlı posta kodu desenini tamamla

<input type="text" pattern="____" title="5 rakamlık posta kodu">

Cevabı göster

<input type="text" pattern="[0-9]{5}" title="5 rakamlık posta kodu">

Özniteliği rolüyle eşleştir

required

Boş alanı engeller
pattern

Metin biçimini denetler
title

Beklenen biçimi söyler
type

Alan türünü belirler

Sıradaki ders: Min, max ve step

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler