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 vepattern="[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