JavaScript ile İstemci Tarafı Form Doğrulaması Nasıl Uygulanır?

JavaScript ile İstemci Tarafı Form Doğrulaması Nasıl Uygulanır?

JavaScript, bugün başlayabileceğiniz en popüler ve çok yönlü programlama dillerinden biridir. Bu programlama dilinin haklı olarak web dili olduğu söylenir ve web sitelerinize etkileşim eklemek için gereklidir.





Form öğesi, web sitelerinde en çok kullanılan HTML öğelerinden biridir. Bu formlar kullanıcıdan girdi alır ve tarayıcıda veya sunucuda işler. Ancak, güvenlik sorunları ve istenmeyen hataların üstesinden gelmek için bu girdileri doğrulamak önemlidir.



DOM Manipülasyonunu Anlamak

JavaScript ile istemci tarafı form doğrulamasını uygulamaya geçmeden önce, genellikle 'DOM' olarak bilinen Belge Nesne Modelini anlamak önemlidir. DOM, JavaScript'in bir HTML web sayfasındaki öğelerle etkileşime girmesine izin veren standartlaştırılmış bir API'dir.





Daha Fazla Bilgi Edinin: Web Sitelerinin Gizli Kahramanı: DOM'yi Anlamak

Olay dinleyicileri eklemek ve kullanıcı girdilerini almak için DOM manipülasyonunun temellerini anlamanız gerekir. DOM API ve JavaScript kullanarak web sayfasının içeriğini nasıl değiştirebileceğinizi açıklayan bir örnek:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

Yukarıdaki kodda,

etiketin bir kimliği var paragraf . JavaScript kodunu yazarken, bu öğeye aşağıdakileri arayarak erişebilirsiniz. document.getElementById('paragraf') yöntemi ve değerini manipüle etmek.

Artık DOM manipülasyonunun temellerini anladığınıza göre, devam edelim ve form doğrulamasını uygulayalım.



JavaScript ile Form Doğrulama

Bir kullanıcıdan alabileceğiniz çeşitli girdi türleri vardır. Metin türü, e-posta türü, parola türü, radyo düğmeleri ve onay kutuları, karşılaşabileceğiniz en yaygın olanlardan bazılarıdır. Giriş türlerinin bu büyük çoğunluğu nedeniyle, her birini doğrulamak için farklı mantık kullanmanız gerekecektir.

Doğrulamaya geçmeden önce, HTML formlarını ve bunların önemini anlamak için biraz zaman ayıralım. HTML formları, verilerinizi girmenize, değişiklikleri uygulamanıza, açılır pencereleri çağırmanıza, bir sunucuya bilgi göndermenize ve daha pek çok şeye izin verdiği için web sitesiyle etkileşim kurmanın başlıca yollarından biridir.



Windows 10, sürüm 1703 için özellik güncellemesi - 0x80240fff hatası

HTML eleman, bu kullanıcıya yönelik formları oluşturmak için kullanılır. Bir HTML formunun girişlerini şu şekilde doğrulayabilirsiniz:

1. E-posta Doğrulama

İster bir kimlik doğrulama sistemi kuruyor, ister bülteniniz için kullanıcı e-postaları topluyor olun, e-postayı veritabanınızda saklamadan veya işlemeden önce doğrulamanız önemlidir. Bir e-postanın gerekli tüm koşulları karşılayıp karşılamadığını kontrol etmek için Düzenli ifade .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Şifre Doğrulama

Parolalar, güvenliğini sağlamak için özel bir doğrulama türüne ihtiyaç duyan önemli bir veri parçasıdır. İki alana sahip bir kayıt formu düşünün: şifre ve şifreyi onayla alanları. Bu girdi çiftini doğrulamak için göz önünde bulundurmanız gereken bazı şeyler şunlardır:

  • Şifre 6 karakterden uzun olmalıdır.
  • Şifrenin değeri ve şifreyi onayla alanı aynı olmalıdır.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Radyo Giriş Doğrulaması

HTML radyo girişi, kullanıcının önceden tanımlanmış birbirini dışlayan seçeneklerden yalnızca birini seçmesine izin veren özel bir grafik kontrol öğesi türüdür. Böyle bir girdinin yaygın bir kullanım durumu, cinsiyetin seçilmesidir. Böyle bir girişi doğrulamak için, bunlardan en az birinin seçili olup olmadığını kontrol etmeniz gerekecektir.

Bu, kullanılarak elde edilebilir mantıksal operatörler VE gibi ( && ) ve yok ( ! ) operatörü bu şekilde:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Giriş Doğrulama'yı seçin

NS HTML öğesi, bir açılır liste oluşturmak için kullanılır. NS içindeki etiketler öğesi, açılır listedeki kullanılabilir seçenekleri tanımlar. Bunların her biri etiketlerin kendileriyle ilişkili bir değer özelliği vardır.

bilgisayarımın saati neden yanlış

Varsayılan veya ilk seçenek için, geçersiz bir seçenek olarak kabul edilmesi için değerini boş bir dize olarak ayarlayabilirsiniz. Diğer tüm seçenekler için uygun bir değer niteliği ayarlayın. İşte nasıl doğrulayabileceğinize dair bir örnek giriş öğesi:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

iphone buldum nasıl açarım
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Onay Kutusu Doğrulaması

Tür onay kutusunun giriş öğeleri, varsayılan olarak etkinleştirildiğinde işaretlenen veya işaretlenen kutular olarak işlenir. Bir onay kutusu, bir formda gönderim için tekli değerler seçmenize olanak tanır. Onay kutuları, 'şartları ve koşulları kabul et' girişi için popüler bir seçimdir.

Bir onay kutusunun işaretli olup olmadığını öğrenmek için, onay kutusu girişinde işaretli özniteliğe erişebilirsiniz. İşte bir örnek:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Korunma tedaviden daha iyidir

Güvenli ve güvenli bir deneyim sağlamak için bir ziyaretçiden aldığınız tüm girdileri doğrulamanız her zaman önerilir. Bilgisayar korsanları, siteler arası komut dosyası çalıştırma saldırıları ve SQL enjeksiyonları gerçekleştirmek için her zaman giriş alanlarına kötü amaçlı veriler girmeye çalışır.

Artık HTML girdilerinizi nasıl doğrulayacağınızı anladığınıza göre, neden bir form oluşturup yukarıda gördüğünüz stratejileri uygulayarak denemeyesiniz?

Paylaş Paylaş Cıvıldamak E-posta HTML'de Form Nasıl Oluşturulur

Kullanıcılarınızın HTML formları ile web sitelerinize veri girmesine izin verin.

Sonrakini Oku İlgili konular
  • Programlama
  • HTML
  • JavaScript
  • Web Geliştirme
  • Kodlama Eğitimleri
Yazar hakkında Nitin Ranganath(31 Makale Yayınlandı)

Nitin, JavaScript teknolojilerini kullanarak web uygulamaları geliştiren hevesli bir yazılım geliştiricisi ve bilgisayar mühendisliği öğrencisidir. Serbest web geliştiricisi olarak çalışıyor ve boş zamanlarında Linux ve Programlama için yazmayı seviyor.

Nitin Ranganath'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın