Form doğrulamayı optimize etmek için HTML5 ve JavaScript kullanmayı öğrenin
Tam metin 3663 Kelimeler, tahmini öğrenme süresi 11 dakika
Kaynak: Pexels
Form doğrulama, çeşitli doğrulama öznitelikleri sağlayan HTML5 kullanıldığında yerleşik bir özelliktir. Tarayıcı tarafı HTML ve JavaScript'in bir parçası olarak. Verileri sunucuya göndermeden önce form girişini doğrulamak için kullanabiliriz. Bununla birlikte, gönderilene güvenmeliyiz, bu nedenle son doğrulama yine de sunucuda yapılmalıdır.
Form girişi geçerli olduğunda, öğe şunu gösterecektir: geçerli sözde stil sayfası. Geçersizse,: geçersiz sözde stil sayfası görünür.
Form girişi geçersiz olduğunda, tarayıcı form gönderimini önleyecek ve bir hata mesajı görüntüleyecektir.
Form doğrulama öznitelikleri
Desen
Desen, metin, arama, bağlantı, telefon, posta ve şifre biçiminde giriş öğelerine uygulanır.
· Normal ifadeyi sayısal bir değere ayarlar ve tarayıcı bunu doğrular.
Min
Bu özellik, aralık, sayı, tarih, ay, hafta, saat ve yerel saat gibi girdi öğeleri için uygundur.
· Bir aralık veya sayı girerken, değerin Min özniteliğinin verilen değerinden büyük veya ona eşit olup olmadığını kontrol edecektir.
Bir tarih, ay veya hafta girerken, tarihin verilen tarih mi yoksa verilen tarihten sonra mı olduğunu kontrol edecektir.
· Saati girerken, tarih ve saatin özelliğin verilen döneminden büyük veya ona eşit olup olmadığını kontrol edecektir.
Max
Max özniteliği, min özniteliğinin tersidir. Girdinin, özniteliğin verilen değerinden küçük veya ona eşit olup olmadığını kontrol eder.
· Bir aralık veya sayı türü girdisine uygulandığında, girdi sayısının min özniteliğinin verilen değerinden küçük veya ona eşit olup olmadığını kontrol eder.
· Tarih, ay veya hafta türündeki öğelere uygulandığında, tarihin öznitelik değerinde verilen tarihten küçük veya ona eşit olup olmadığını kontrol edecektir.
· Zaman türü girdisine uygulandığında, tarih ve saatin min özniteliğinin verilen değerinden küçük veya ona eşit olup olmadığını kontrol edecektir.
gereklidir
Bu özellik, giriş öğesinin boş olup olmadığını doğrular.
· Metin, arama, bağlantı, telefon, e-posta, şifre, tarih, saat, ay, hafta, numara, onay kutusu, kayıt, belge ve seçilen içerik ve metin kutusu gibi öğeler için kullanılabilir.
Kaynak: Pexels
Adım
Adım, giriş değerinin bir tam sayı olup olmadığını kontrol eder.
· Bir tarih türü öğesi girerseniz, gün sayısının tam sayı olup olmadığını kontrol eder.
· Bir ay türü öğesi girerseniz, ay sayısının tam sayı olup olmadığını kontrol eder.
· Hafta türü bir öğe girerseniz, hafta sayısının tam sayı olup olmadığını kontrol eder.
· Bir zaman türü öğesi girerseniz, saniye sayısının bir tam sayı olup olmadığını kontrol edecektir.
· Bir aralık ve sayı türü öğesi girerseniz, aralık ve değerin tam sayı olup olmadığını kontrol eder.
Minimum uzunluk
Minlength özniteliği metin, arama, bağlantı, telefon, e-posta, şifre ve metin kutusu türü giriş öğelerine uygulanabilir.
Kullanıcı tarafından girilen metin içindeki kelime sayısının öznitelik değerinden büyük veya ona eşit olup olmadığını kontrol eder.
Maksimum uzunluk
Maxlength özniteliği, metin, arama, bağlantı, telefon, e-posta, şifre ve metin kutusu türü giriş öğelerine de uygulanabilir.
· Kullanıcı tarafından girilen metin içindeki kelime sayısının öznitelik değerinden küçük veya ona eşit olup olmadığını kontrol eder.
Form doğrulama özniteliklerini uygulayın
Öğeye form doğrulama nitelikleri ekleyerek bunları kullanabiliriz. Örneğin, giriş olarak bir e-posta adresi içeren bir form yazın.
İlk adımda, aşağıdaki HTML dilini girin:
< formid = 'form' > < labelfor = "e-posta" > E? < /etiket > < inputid = "e-posta" adı = "e-posta" requiredpattern = "+ @ + \ .. +" > < buttontype = 'gönder' > Sunmak < /buton > < /form >Yukarıdaki kodda, girdi elemanının gerekli bir özniteliği vardır ve girdi, ayara göre gerçekleştirilir.
Aynı zamanda, e-posta adresinin normal ifadesine değer olarak desen özelliğini de ekleriz.
Daha sonra aşağıda gösterildiği gibi, girdi geçerli veya geçersiz olduğunda, giriş öğesinin sınırını değiştirmek için bir stil sayfası ekleriz:
girdi: geçersiz {border: 1px solid red} input: vvalid {border: 1px solid black}Kaynak: rawinput.css platformunu görüntüleyin: GitHub
Makalenin başında bahsedilen sözde sınıf tarzı bu adımı tamamlamak için burada kullanılacaktır.
Son olarak, bu örnekte form gönderimini önlemek için preventDefault'u çağırarak JavaScript kodu ekleyin.
constform = document.querySelector ('# form'); form.onsubmit = (e) = > {e.preventDefault ();}Giriş uzunluğunu ve aralığını kontrol etmeye başka bir örnek verin. Örneğin, kullanıcının adını ve yaşını almak için aşağıdaki HTML kodunu yazın:
< formid = 'form' > < labelfor = "ad" > Adınız ne? < /etiket > < inputid = "ad" ad = "ad" gerekliminlength = '5' maxlength = '20 ' > < br > < spanid = 'çok kısa ad' gizli > İsim çok kısa < / span > < spanid = 'isim çok uzun' gizli > İsim çok uzun < / span > < br > < labelfor = "yaş" > Yaşın kaç? < /etiket > < inputid = "yaş" ad = "yaş" tür = 'sayı' gereklimin = '0' maks = '150' > < br > < spanid = 'yaş çok yüksek' gizli > Yaş çok yüksek < / span > < spanid = 'yaş çok düşük' gizli > Yaş çok düşük < / span > < br > < buttontype = 'gönder' > Sunmak < /buton > < /form >Hem giriş adı hem de yaş, uzunluk ve aralık niteliklerine sahiptir. Giriş geçersiz olduğunda, giriş bilgilerini metinde gösterilen formda görebilirsiniz.
Örnek 1 ile aynı, giriş öğesi geçerli veya geçersiz olduğunda, giriş kutusunun kenarlığını değiştirmek için stil sayfasını girin:
girdi: geçersiz {border: 1px solid red} input: vvalid {border: 1px solid black}Son olarak, giriş geçersiz olduğunda, doğrulama bilgilerini JavaScript aracılığıyla görebilirsiniz:
const form = document.querySelector ('# form'); const name = document.querySelector ('# name'); const age = document.querySelector ('# age'); const nameTooShort = document.querySelector ('# ad- very-short '); const nameTooLong = document.querySelector (' # name-too-long '); const ageTooLow = document.querySelector (' # age-very-low '); const ageTooHigh = document.querySelector (' # yaş -çok-yüksek '); form.onsubmit = (e) = > {e.preventDefault ();} name.oninput = (e) = > {nameTooShort.hidden = true; nameTooLong.hidden = true; if (e.srcElement.validity.tooShort) {nameTooShort.hidden = false;} if (e.srcElement.validity.tooLong) {nameTooLong.hidden = false;}} age.oninput = (e) = > {ageTooLow.hidden = true; ageTooHigh.hidden = true; if (e.srcElement.validity.rangeOverflow) {ageTooHigh.hidden = false;} if (e.srcElement.validity.rangeUnderflow) {ageTooLow.hidden = false;}}Yukarıdaki kodda, sonraki girişlerin geçerliliğini kontrol etmek için oninput olay işleyicisini bir olay işleyici işlevi olarak ayarlayın.
Her işlevde, önce tüm bilgileri gizlerim, böylece eski mesajları görmezim. Ardından, ayarlanan minimum ve maksimum uzunluklara göre ad girişinin çok kısa veya çok uzun olup olmadığını kontrol edin.
Herhangi bir hata varsa, ilgili bilgiler HTML'de gösterilecektir.
Kaynak: Pexels
Benzer şekilde, uzunluğun maksimum ve minimum set değerlerine göre yaş giriş değerinin aralık içinde olup olmadığını kontrol ederiz. Bir hata varsa, ilgili bilgileri HTML'de gösteririz.
HTML5 ve JavaScript ile, çeşitli türlerdeki girdi değerlerinin geçerliliği herhangi bir kitaplık olmadan kontrol edilebilir.
Uzunluk, aralık ve herhangi bir kalıp gibi girdi öğelerini normal ifadelerle doğrulayabiliriz, ancak kaydetmeden önce sunucu tarafını kontrol etmeliyiz çünkü bazı kullanıcılar doğrulamayı atlamak için yine de tarayıcı tarafı uygulamasını kırabilir.
Yorum Beğen Takip Et
Yapay zeka öğrenme ve geliştirmenin kuru mallarını paylaşalım
Yeniden yazdırıyorsanız, lütfen arka planda bir mesaj bırakın ve yeniden yazdırma şartnamelerine uyun
