HTML Input için Pattern Örnekleri

Türkçesi: HTML girdi elemanları için desen örnekleri olsa da aşina olduğumuz kavramlardan devam ediyorum. Yazılımcı için kodladığı web sayfasının kullanıcısından sağlıklı veri alabilmek çok önemlidir. Veriyi doğru almak için maskeler, fonksiyonlar, regex'ler kullanırız. Bugünlerde işime oldukça yarayan bir kullanımı göstermek istiyorum.

Pattern'ler ile ilgili daha fazla bilgi için Mozilla sitesini ziyaret edebilirsiniz.

Eğer kullanıcının 1 ile 9 arasında sadece bir rakam girmesini istiyorsanız pattern attribute'unu kullanabilirsiniz.

<input type="text" pattern="[1,9]{1}" />

Eklediğimiz kuralın mesajını da kullanıcıya vermekte fayda olacaktır.

<input
  type="text"
  pattern="[1,9]{1}"
  title="1 ile 9 arasında bir rakam giriniz."
/>

Formu göndermeye çalıştığınızda aşağıdaki gibi validasyon mesajı belirecektir.

Örnek Girdi Desenleri

[0-9]{4} 0 ile 9 arasında 4 tane rakam
[1-9][0-9]{4} ilki 1'den büyük olmak şartı ile 5 tane rakam
(?=._\d)(?=._[a-z])(?=.\*[A-Z]).{8,} En az biri rakam, biri büyük ve biri küçük harf olmak üzere en az 8 karakter
.{8,} 8 veya daha fazla karakter
[a-z]{3} Üç küçük harf
[A-Z]{3} Üç büyük harf
[A-Za-z]{3} Üç küçük veya büyük harf
[A-Za-z]{3,8} En az 3 an fazla 8 büyük veya küçük harf
[A-Z]{1}[0-9]{1} 1 büyük harf ve 1 rakam
[ABC]{1} A,B ve C harflerinden sadece biri
[^'\x22]+ ' ve " karakterlerini engelle
^A A ile başlamalı
A\$ A ile bitmeli
^A[a-zA-Z]{2}Z\$ A ile başlayıp Z ile biten 4 harfli
https?://.+ http:// veya https:// içermeli
[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}\$ E-Posta Adresi
[a-z]{4,8} En az 4 en fazla 8 tane küçük harf

Regex Cheatsheet

Aşağıdaki temel regex elementlerini kullanarak kendinize özel regex tanımlamanızı yapıp, input'larda kullanabilirsiniz.

. herhangi bir karakter
\w \d \s kelime, digit,
\W \D \s kelime değil rakam
[abc] a, b veya c
[^abc] a,b veya c hariç
[a-g] a ile g arasında harf

regexr.com'u diğer regex'ler için ziyaret edebilirsiniz.