v2.5.2
Giriş yap

Input içerisindeki değeri regex koşuluna göre yazmak istiyorum.

khnbzkrt
378 defa görüntülendi

Selam arkadaşlar, bir input içerisindeki değeri, kullanıcı yazdıkça belirli bir formatta göstermek istiyorum.
Örneğin;

0(5xx) xxx xx xx
xx:xx
xx-xx-xxxx vs.

Kullanıcı inputa yazdıkça input değeri belirlediğim regex kuralına göre görünsün ve valide olsun istiyorum. Bunu nasıl yapabilirim?

Bu benim ilk sorum o yüzden hatalarım varsa linç etmeyin :)

Teşekkür ederim.

Cevap yaz
Cevaplar (2)
tayfunerbilen
1012 gün önce

O zaman hoşgeldin diyelim :) Kategorileri seçerken dikkat edersen çok daha mutlu oluruz ^^ soruna gelecek olursak

input mask olayını istiyorsan bunun için yazılmış pluginler var, yeniden yazmak yerine onları tercih edebilirsin

https://github.com/RobinHerbots/Inputmask (en popüleri)

jquery kütüphanesi ve eklenti dosyasını çağırdıktan sonra istediğin örnekleri şöyle elde edebilirsin

$('.elem').inputmask("0(599) 999 99 99")
$('.elem2').inputmask("99:99")
$('.elem3').inputmask("99-99-9999")

kısaca senin x dediğin yerlere eklentide 9 koyuyoruz. Eğer harf yazsınlar dersen 9 yerine a koyabilirsin. Hem harf hem sayı dersende 9-a koyabilirsin senin x dediğin değerlere. İstersen daha fazla kullanımına eklenti dökümanından bakabilirsin.

Demo: https://codepen.io/tayfunerbilen/pen/abJrbYa

Eğer ben sadece valid olup olmadığını kontrol etmek istiyorum diyorsan şöyle bir şey de olabilir

<form action="" novalidate="novalidate">
    <input type="text" placeholder="0(5xx) xxx xx xx" pattern="0\(5[0-9]{2}\) [0-9]{3} [0-9]{2} [0-9]{2}" required />
    <input type="text" placeholder="xx:xx" pattern="[0-9]{2}:[0-9]{2}" required />
    <input type="text" placeholder="xx-xx-xxxx" pattern="[0-9]{2}-[0-9]{2}-[a-z]{4}" required />
</form>

<style>
	input {
		outline: 0;
	}
    input:invalid {
        border-color: red;
    }
    input:valid {
        border-color: green;
    }
</style>
khnbzkrt
1012 gün önce

Çok teşekkür ederim. Bu tür ihtiyaçlar için gerçekten güzek bir kütüphaneymiş. Yanlış kelimelerle arama yaptığım için bir sonuca ulaşamamışım ama burası doğru adres oldu benim için. Çok sağol :)