JavaScript'te E-posta Doğrulaması Nasıl Yapılır? [Örneklerle]
Yayınlanan: 2021-02-23JavaScript, uygulamalar oluşturmak için tasarlanmış bir programlama dilidir. Çok hafif ve kullanımı kolay olduğu için diğer dillerden çok daha hızlıdır. İyi tasarlanmış uygulamalar oluşturmak için kullanılır.
JavaScript'te e-posta doğrulaması, web uygulamaları oluşturma kullanıcı deneyimi için önemlidir. Doğrulama, web uygulamasının istemcisinden bir sunucuya geçerli bilgilerin aktarılmasına yardımcı olur.
İçindekiler
Doğrulama nedir?
Doğrulama, kullanıcının girdiği değerleri inceleme sürecini ifade eder. Uygulama oluşturmada çok önemli bir rol oynar ve kullanıcı deneyimini geliştirir. Cep telefonu numaraları, e-postalar, tarihler ve şifreler gibi birçok alan bu işlemle doğrulanır.
JavaScript, verilerin diğer sunucu tarafı doğrulamalarına göre daha hızlı işlenmesi nedeniyle doğrulama sürecini daha hızlı hale getirir. Şimdi JavaScript'te e-posta doğrulamanın uygulanmasına bir göz atalım .
JavaScript'te E-posta Doğrulama
E-posta doğrulama, bir HTML formunun kimliğini doğrulamanın hayati parçalarından biridir. E-posta, @ sembolü kullanılarak iki bölüme ayrılmış bir ASCII karakter alt kümesi veya dizesidir. İlk bölümü özel bilgilerden oluşur ve ikincisi, bir e-postanın kaydedildiği alan adını içerir.
İşte ilk bölümün ASCII karakterleri:
- # * + & ' ! gibi özel karakterler % @ ? { ^ } ”
- Sayısal karakterler (0 - 9)
- Nokta, nokta vb., e-postanın son veya ilk harfi olamayacak ve birbiri ardına tekrar edilemeyecek bir koşula sahip olmak.
- Büyük harfli alfabeler (A'dan Z'ye) ve Küçük harfli (a'dan z'ye) alfabeler
İkinci kısım aşağıdakileri içerir:
- noktalar
- rakamlar
- tireler
- Edebiyat
Normal ifadeler kullanmak , JavaScript'te e-posta doğrulamanın en iyi yollarından biridir . Karakterin modelini tanımlamak için düzenli ifadeler kullanır.
Geçerli e-posta kimliği örneklerinden bazıları:
Geçersiz E-posta Kimliğine Diğer Bazı Örnekler
- [email protected] (birbirine noktalara izin verilmez)
- Inownzsite()&@abcd.com (normal ifadede yalnızca karakterlere, kısa çizgiye, alt çizgiye ve rakamlara izin verilir.)
- Ourwebsiteismne.azbyz.com (burada @ sembolü yoktur)
- [email protected] (Burada üst düzey alan adı nokta ile başlayamaz)
- @youmenandwe.we.net (burada @ sembolü ile başlayamaz)
- [email protected] (“.b” geçerli bir üst düzey alan adı değildir)email.js
Dosya, e-posta doğrulaması için gereken bir JavaScript kodundan oluşur. Burada, bir uygulamanın istemci tarafında bir e-postayı doğrulamak için normal ifadeler kullanılır.
JavaScript kodunda verimli e-posta doğrulaması için kontrol noktaları:
- Bir e-posta adresini doğrulamak için normal bir ifade tanımlayın
- Bir giriş değeri normal ifadelerle eşleşirse
- Eşleşirse, "e-posta adresi geçerli" uyarısını gönderir.
- Eşleşmiyorsa, "e-posta adresi geçersiz" uyarısını gönderin.
İlgili: Javascript'te Parola Doğrulama
JavaScript'te E-posta Doğrulama Kodu
Aşağıda verilen, JavaScript'teki e-posta doğrulama kodudur. Bu kod, kullanıcı tarafından oluşturulan veya girilen e-postanın geçerli olup olmadığını doğrulayabilir. Dosyayı filename.js olarak kaydedin.
// Kod Parçacığı
işlev EmailValidation(girilenEmail)
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(enteredEmail.value.match(enteredEmail))
{
alert("Evet! geçerli bir e-posta!");
document.form1.text1.focus();
true döndür;
}
Başka
{
alert(“Üzgünüm! Geçersiz bir e-posta!”);
document.form1.text1.focus();
yanlış döndür;
}
}
JavaScript işlevi aşağıdaki gibi HTML biçiminde kullanılır. Dosyayı filename.html olarak kaydedin:
<!DOCTYPE html>
<html lang=”tr”>
<kafa>
<meta karakter kümesi=”utf-8″>
<title>JavaScript'te e-posta doğrulaması</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div sınıfı=”posta”>
<h2>Doğrulama için e-postayı girin</h2>
<form adı=”form1″ eylem=”#”>
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</form>
</div>
<script src="dosyaadı.js"></script>
</body>
</html>
Aşağıdaki kod, CSS kullanarak forma stil ekleyebilir. Dosyayı filename.css olarak kaydedin.
li {liste stili türü: yok;
yazı tipi boyutu: 16pt;
}
.mail {
kenar boşluğu: otomatik;
üst dolgu: 20 piksel;
alt dolgu: 20 piksel;
genişlik: 850 piksel;
arka plan : rgb(150, 195, 208);
sınır: 1px katı rgb(1, 20, 24);
}
.mail h2 {
sol kenar boşluğu: 36 piksel;
}
girdi {
yazı tipi boyutu: 28pt;
}
girdi:odak, textarea:odak{
arka plan rengi: beyaz;
}
giriş gönder {
yazı tipi boyutu: 18pt;
}
Artık HTML kodunu çalıştırabilir ve e-posta doğrulamasını JavaScript'te tamamlayabilirsiniz .
Okuyun: GitHub'da Javascript Projeleri
Dünyanın En İyi Üniversitelerinden Online Yazılım Kursları Öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.
Çözüm
E-posta doğrulaması, geçersiz e-posta adresleri oluşturmamak için çok önemlidir. Bu yazıda, bir e-posta kimliğinin geçerli olup olmadığını doğrulamak ve girilen e-posta kimliğinin geçersiz olup olmadığını sistemin kontrol edip kullanıcıya bildirmesini sağlamak için kod ile anlatılmaktadır.
Full-stack geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saat zorlu eğitim, 9+ proje ve ödev sunan Full-stack Yazılım Geliştirmede Yönetici PG Programına göz atın , IIIT-B Mezun statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.
