Phenquestions
Form doğrulama, web geliştirme sürecinin temel ve en önemli parçasıdır. Genellikle form doğrulaması sunucu tarafında yapılır. Form doğrulama, herhangi bir gereksiz veya yanlış veri sağlanmışsa veya gerekli bir alan boş bırakılmışsa, kullanıcıya hata mesajlarının gösterilmesine yardımcı olur. Sunucu herhangi bir hata bulursa, o hatayı geri atar; sonra hata mesajını kullanıcıya gösteriyoruz. Ancak, form verilerini doğrulamak ve hataları hemen göstermek için ön uçta javascript kullanabiliriz. Bu yazımızda javascript'te temel form doğrulamayı öğreneceğiz. Şimdi doğrudan örneklere geçelim ve bunu javascript'te nasıl yapabileceğimizi görelim.
Örnekler
Her şeyden önce, "Kullanıcı Adı" etiketli bir girdi alanına sahip olduğumuz ve HTML dosyamıza bir girdi türü gönderdiğimiz "testForm" adında bir form alıyoruz. Form etiketinde, kapatma yaptığımız ve bir fonksiyon döndürdüğümüz bir onsubmit olayı yarattık validateFunc().
Komut dosyasında, kullanıcı gönder düğmesine her bastığında çalıştırılacak validateFunc() fonksiyon tanımını yazacağız. Bu fonksiyonda, kullanıcı adı giriş alanını doğrulayacağız. Kullanıcı gönder düğmesine bastığında kullanıcı adı alanının boş olup olmadığını doğrulamak istediğimizi varsayalım.
Yani, kullanıcı adı alanını doğrulamak için. Önce belgeye bir değişken atarız.testForm, sadece koda temiz ve anlaşılır bir görünüm vermek için. Ardından fonksiyon tanımında doğrulama için kodu yazacağız. Boş form alanını kontrol etmek için bir if ifadesi yazacağız. Kullanıcı adı alanı boşsa, hatayı göstermek için bir uyarı kutusu gösteririz, tekrar kullanıcı adı alanına odaklanırız ve formun gönderilmemesi için false döndürürüz. Aksi takdirde, kontrolü geçerse ve veriler doğrulanırsa, işleve true döneriz.
var theForm = belge.testFormu;// Form doğrulama kodu
function validationFunc()
if (Form.isim.değer == "")
alert("isim boş");
Form.isim.odak();
yanlış döndür;
dönüş (doğru);
Tüm bu kodu yazdıktan sonra. Kodu çalıştırıp form alanına herhangi bir şey yazmadan gönder butonuna tıklarsak.
Aşağıdaki ekteki ekran görüntüsünde de görebileceğiniz gibi uyarı kutusuna hata veriyor.
Bu, form doğrulamasını uygulamaya başlamak için çok basit ancak iyi bir örnektir. Daha fazla uygulama için, çoklu form doğrulamaları gibi veya karakter uzunluğunu da kontrol etmek istiyorsunuz.
Bunun için öncelikle HTML dosyamızdaki form etiketinde "email" ve "password" etiketli iki form alanı varsayalım.
Javascript'te doğrulama için, script dosyasının fonksiyon tanımına e-posta ve şifre form alanlarının doğrulanması için tekrar bir if ifadesi koyacağız. Alan boş olmamalı ve uzunluğu 10 karakterden az olmamalıdır gibi e-posta alanına birden fazla doğrulama uygulamak istediğimizi varsayalım. Yani, OR “||” kullanabiliriz. if ifadesinde. Bu hatalardan herhangi biri meydana gelirse, göstermek istediğimiz hata mesajını içeren bir uyarı kutusu gösterecek, e-posta form alanına odaklanacak ve işleve false döndürecektir. Benzer şekilde şifre alanına karakter uzunluğu kontrolü uygulamak istiyorsak bunu yapabiliriz.
var theForm = belge.testFormu;// Form doğrulama kodu
function validationFunc()
if (Form.isim.değer == "")
alert("isim boş");
Form.isim.odak();
yanlış döndür;
if (Form.e-posta.değer == "" || Form.e-posta.değer.uzunluk < 10)
alert("E-posta uygun değil");
Form.e-posta.odak();
yanlış döndür;
if (Form.parola.değer.uzunluk < 6)
alert("Şifre 6 karakter uzunluğunda olmalıdır");
Form.parola.odak();
yanlış döndür;
dönüş (doğru);
Tüm bu kodu yazdıktan sonra, güncellenmiş koda sahip olmak için sayfayı yeniden yükleyin. Şimdi ya boş bir email alanı bırakıyoruz ya da 10 karakterden daha kısa bir email yazıyoruz. Her iki durumda da "E-posta uygun değil" hatası gösterecektir.
JavaScript'te temel form doğrulamasını bu şekilde uygulayabiliriz. Veri doğrulamasını, Regex kullanarak veya kendi özel işlevimizi yazarak istemci tarafında da uygulayabiliriz. E-posta alanına veri doğrulama uygulamak istediğimizi varsayalım. Bir e-postayı doğrulamak için normal ifade böyle olurdu.
if (/^[a-zA-Z0-9.!#$%&'*+/=?^_'|~-][e-posta korumalı][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(Form.e-posta.değer))
alert("E-posta uygun değil");
Form.e-posta.odak() ;
yanlış döndür;
Bu, regex kullanarak veri doğrulamanın yalnızca temel bir gösterimiydi. Ama gökyüzü uçman için açık.
Sonuç
Bu makale javascript'teki temel form doğrulamasını kapsar. Ayrıca regex kullanarak veri doğrulamasını denedik ve gizlice girdik. Normal ifade hakkında daha fazla bilgi edinmek istiyorsanız, linuxhint üzerinde normal ifade ile ilgili özel bir makalemiz var.com. Javascript kavramlarını ve bunun gibi daha faydalı içerikleri öğrenmek ve anlamak için linuxhint'i ziyaret etmeye devam edin.com. teşekkür ederim!
