JavaScript'te E-posta Doğrulama: Dört Güvenilir Yöntem

30% civarında Bir listedeki e-posta adreslerinin önemli bir kısmı tek bir yıl içinde geçersiz hale gelir ve listenizin %10'undan fazlası geçersizse, e-postalarınızın %44'ünden daha azı teslim edilir. Bu geçersiz adreslerin çoğu, zayıf doğrulama mekanizmalarına sahip formlar aracılığıyla veritabanlarına girer.

JavaScript'te e-posta doğrulama katmanlar halinde çalışır. Bir adresin doğru biçimlendirilmiş olup olmadığını kontrol etmek nispeten basittir. Alan adının posta alıp alamayacağını doğrulamak daha gelişmiş ancak yine de mümkündür. Zor olan kısım, posta kutusunun gerçekten var olup olmadığını ve mesaj kabul edip edemeyeceğini doğrulamaktır ve yalnızca tarayıcıda çalışan JavaScript bunu tek başına yapamaz.

Doğrulama genellikle üç seviyede gerçekleşir: sözdizimi, alan adı ve posta kutusu. JavaScript sözdizimi kontrollerini iyi bir şekilde ele alırken, kütüphaneler ve API'ler alan adlarının doğrulanmasına yardımcı olabilir. Ancak posta kutusu doğrulaması, tarayıcının bir gelen kutusunun gerçek olup olmadığını doğrudan doğrulayamaması nedeniyle sunucu tarafında bir API isteği gerektirir.

JavaScript'te E-posta Doğrulama Yöntemleri

Aşağıdaki yöntemlerin her biri doğrulama yığınınıza bir katman daha ekler. Bunlar en basitten en kapsamlıya doğru sıralanmıştır. Çoğu üretim uygulaması en az ikisini kullanırken, güvenlik açısından kritik kayıt akışları dördünü de kullanır.

1. HTML5 type="email" özniteliği

En basit JavaScript e-posta doğrulama başlangıç ​​noktası, giriş öğenize eklediğiniz HTML5 type="email" özniteliğidir. Tarayıcılar, form gönderildiğinde temel biçim doğrulamasını otomatik olarak uygular.

<form>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Submit</button>
</form>

Tarayıcı, gönderime izin vermeden önce alanın @ sembolünü ve etki alanı benzeri bir dizeyi içerip içermediğini kontrol eder. Doğrulama varsayılan olarak gönderim sırasında çalışır.

Ancak HTML5 kontrolü çok basittir. Gerçek e-postalar asla almayacak olsalar bile, a@b veya user@domain gibi adresleri kabul eder. Ayrıca, birisi yazarken canlı geri bildirim sağlamaz. Bu nedenle, onu bir başlangıç ​​noktası olarak kullanın: her zaman dahil edin, ancak asla tek kontrolünüz olarak ona güvenmeyin.

2. Düzenli ifade kalıbıyla doğrulama

Düzenli ifadeler (regex), en yaygın JavaScript e-posta doğrulama yöntemidir. Form gönderiminden önce, isteğe bağlı olarak çalışan ve anında geri bildirim sağlayan format denetimi sunar.

İşte en yaygın geçerli formatları kapsayan temel bir düzenli ifade:

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// Usage
console.log(isValidEmail("[email protected]"));  // true
console.log(isValidEmail("notanemail"));         // false

Deseni anlamak:

• ^ — dizenin başlangıcı
• [^\s@]+ — boşluk veya @ işareti olmayan bir veya daha fazla karakter
• @ — kelimenin tam anlamıyla @ sembolü
• [^\s@]+ — @ işaretinden sonra bir veya daha fazla karakter (alan adı)
• \. — gerçek bir nokta
• [^\s@]+$ — noktadan sonra bir veya daha fazla karakter (üst düzey alan adı)

Daha sıkı RFC 5322 uyumlu doğrulama için daha spesifik bir kalıp kullanabilirsiniz:

function isValidEmail(email) {
  const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}

Düzenli ifadeyi isValidEmail() gibi yeniden kullanılabilir bir fonksiyona sarmak, doğrulama mantığınızı tek bir yerde tutar ve güncellemeyi kolaylaştırır.

En büyük sınırlama, regex'in yalnızca biçimi kontrol etmesidir. Bir alan adının var olup olmadığını veya bir posta kutusunun gerçek olup olmadığını söyleyemez. Örneğin, bir adres... [e-posta korumalı] Alan adında yazım hatası olsa ve e-posta büyük olasılıkla asla teslim edilmeyecek olsa bile, format geçerli göründüğü için yine de onaylanacaktır.

3. JavaScript doğrulama kütüphanesi kullanmak

Validator.js gibi yerleşik kütüphaneler, uluslararası alan adları, alışılmadık ancak geçerli e-posta biçimleri ve yeni alan adı uzantıları da dahil olmak üzere temel regex kalıplarının gözden kaçırdığı birçok durumu ele alır. Uygulamanız zaten bir doğrulama çerçevesi kullanıyorsa, özel regex kalıpları sürdürmektense bir kütüphane kullanmak daha temiz bir seçenektir.

validator.js dosyasını yükleyin:

npm install validator

Bunu kodunuzda kullanın:

import validator from 'validator';

function isValidEmail(email) {
  return validator.isEmail(email);
}

// Usage
console.log(isValidEmail("[email protected]"));   // true
console.log(isValidEmail("[email protected]"));          // false
console.log(isValidEmail("user@example"));       // false

validator.isEmail() metodu, basit bir regex'ten daha kapsamlı bir format kontrolü gerçekleştirir ve birçok yaygın format sorununu yakalar.

Ancak sınırlama aynı: kütüphaneler yalnızca yapıyı doğrular, teslim edilebilirliği değil. Örneğin, şu tür bir adres: [e-posta korumalı] Biçim teknik olarak doğru olduğu için yine de geçerlidir. Liste kalitesinin önemli olduğu üretim kayıt akışlarında, bu yöntemin yanında bir API çağrısı da gereklidir.

4. E-posta doğrulama API'si ile doğrulama

Bir posta kutusunun gerçekten var olup olmadığını doğrulamanın tek yöntemi API tabanlı bir yaklaşımdır. Şimdiye kadar ele alınan yöntemler yalnızca e-posta adresinin biçimini doğrular. Bir API ise adresin gerçekten posta alıp alamayacağını kontrol eder.

MKS DeBounce E-posta Doğrulama API'si Sözdizimini, etki alanı MX kayıtlarını, posta kutusunun varlığını, tek kullanımlık adres durumunu, rol hesaplarını ve tüm etki alanı davranışlarını tek bir API çağrısıyla kontrol eder. İşte JavaScript'te fetch() kullanan bir örnek:

async function validateEmailWithAPI(email) {
  const apiKey = 'YOUR_DEBOUNCE_API_KEY';
  const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;

  try {
    const response = await fetch(url);
    const data = await response.json();

    return {
      result: data.debounce?.result,
      reason: data.debounce?.reason,
      free_email: data.debounce?.free_email === "true" || data.debounce?.free_email === true,
      did_you_mean: data.debounce?.did_you_mean,
      role: data.debounce?.role === "true" || data.debounce?.role === true
    };
  } catch (error) {
    console.error('Validation error:', error);
    return null;
  }
}

Geliştiricilerin en çok önem verdiği yanıt alanları:

• Sonuç — en üst düzey değerlendirme: "Gönderilebilir", "Riskli" veya "Geçersiz"
• Sebep — belirli bulgu: teslim edilebilir, atılabilir, genel, sözdizimi hatası, vb.
• did_you_mean — API'nin yaygın bir yazım hatası tespit etmesi durumunda düzeltilmiş adres (örneğin, gmial.com → gmail.com)
• ücretsiz e-posta — adresin Gmail veya Yahoo gibi ücretsiz bir sağlayıcıya ait olup olmadığı

Özellikle istemci tarafındaki tek kullanımlık e-postaların tespiti için DeBounce ayrıca bir özellik sunmaktadır. ücretsiz tek kullanımlık e-posta API'si Ana API anahtarınızı ifşa etmeden doğrudan tarayıcıdan çağırabileceğiniz bir yöntem.

Eğer hiç kod yazmak istemiyorsanız, JavaScript doğrulama aracı Tek bir script etiketiyle kurulur ve özel entegrasyon çalışmasına gerek kalmadan doğrulamayı doğrudan formlarınızda gerçekleştirir.

Gerçek Zamanlı E-posta Doğrulamasının Uygulanması

Gerçek zamanlı e-posta doğrulama, kullanıcıların form gönderimini beklemek yerine hataları anında düzeltebilmelerini sağladığı için hem kullanıcı deneyimini hem de veri kalitesini iyileştirir. Önemli olan, çalıştırdığınız doğrulama türü için doğru olayı seçmektir.

onInput her tuş vuruşunda tetiklenir, bu da onu regex doğrulaması gibi hızlı kontroller için kullanışlı hale getirir. onChange ise alan odak kaybettiğinde tetiklenir, bu da API doğrulaması için daha uygun hale getirir çünkü istek göndermeden önce kullanıcının yazmayı bitirmesini bekler.

İşte oninput ve regex kontrolü kullanan basit bir gerçek zamanlı kurulum:

const emailInput = document.getElementById('email');
const feedbackEl = document.getElementById('email-feedback');

emailInput.addEventListener('input', function () {
  const email = this.value;

  if (email.length === 0) {
    feedbackEl.textContent = '';
    this.classList.remove('valid', 'invalid');
    return;
  }

  if (isValidEmail(email)) {
    this.classList.add('valid');
    this.classList.remove('invalid');
    feedbackEl.textContent = '✓ Looks good';
  } else {
    this.classList.add('invalid');
    this.classList.remove('valid');
    feedbackEl.textContent = 'Please enter a valid email address';
  }
});

Bir API yöntemi kullanırken, isteği göndermeden önce kullanıcının 300-500 milisaniye boyunca yazmayı bırakmasını bekleyerek çağrıyı geciktirin. Bu, her kısmi tuş vuruşu için bir API çağrısı gönderilmesini önler:

let debounceTimer;

emailInput.addEventListener('input', function () {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    validateEmailWithAPI(this.value).then(result => {
      if (result?.did_you_mean) {
        feedbackEl.textContent = `Did you mean ${result.did_you_mean}?`;
      }
    });
  }, 400);
});

İyi bir gerçek zamanlı geri bildirim açık ve nettir. "Bunu mu demek istediniz?" [e-posta korumalı]"?" gibi ifadeler faydalı olurken, "Geçersiz e-posta" gibi genel mesajlar kullanıcıları hayal kırıklığına uğratır ve form terkini artırır.

Popüler JavaScript Çerçevelerinde E-posta Doğrulama

Çerçeve düzeyindeki form kütüphaneleri durum yönetimini, hata görüntülemeyi ve gönderim mantığını ele alır; bu nedenle doğrulama eklemek genellikle olayları manuel olarak bağlamak yerine bir kural belirtmek anlamına gelir.

React Hook Form ile React:

import { useForm } from 'react-hook-form';

export default function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Enter a valid email address'
          }
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Sign up</button>
    </form>
  );
}

VeeValidate ile Vue:

import { useField, useForm } from 'vee-validate';

export default {
  setup() {
    const { handleSubmit } = useForm();
    const { value: email, errorMessage } = useField('email', (val) => {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Enter a valid email address';
    });

    const onSubmit = handleSubmit(values => console.log(values));

    return { email, errorMessage, onSubmit };
  }
};

Zod ile şema doğrulama:

import { z } from 'zod';

const emailSchema = z.string().email('Enter a valid email address');

function validateEmail(email) {
  const result = emailSchema.safeParse(email);
  return result.success ? null : result.error.issues[0].message;
}

Her üç durumda da, çerçeve kurulumu hallederken siz doğrulama kuralını sağlarsınız. Daha sonra düzenli ifadeyi bir API çağrısıyla değiştirirseniz, genel yapı büyük ölçüde aynı kalır.

İstemci Tarafı E-posta Doğrulamasının Sınırlamaları

İstemci tarafı doğrulama, bir e-posta adresinin geçerli görünüp görünmediğini kontrol edebilir, ancak adresin gerçekten çalışıp çalışmadığını söyleyemez. İşte JavaScript'in tek başına yakalayamadığı bazı sorunlar.

1. Gerçekçi görünen alan adlarında yazım hataları: Örneğin, şu gibi adresler: [e-posta korumalı], [e-posta korumalı]ya da [e-posta korumalı] Alan adları yanlış yazılmış olsa bile format doğrulamasından geçiyor. E-posta asla kullanıcıya ulaşmıyor ve adres listenizde kalarak geri dönen e-postalar oluşturuyor.
2. Tek kullanımlık ve geçici e-posta adresleri: 10minutemail.com ve guerrillamail.com gibi hizmetler, doğrulama kontrollerinden geçen geçici gelen kutuları oluşturur. Kullanıcılar genellikle kayıt formlarını atlamak için bu adresleri girer ve adres kısa süre sonra kaybolur.
3. Tüm e-postaları kabul eden alan adları: Bazı alan adları, belirli posta kutusunun var olup olmadığına bakılmaksızın, kendilerine gönderilen her e-postayı kabul edecek şekilde yapılandırılmıştır. Tüm e-postaları kabul eden bir alan adındaki adres, biçim doğrulamasından, MX kontrollerinden ve hatta bazı SMTP kontrollerinden geçse bile pratikte teslim edilemez durumda kalır.
4. Rol tabanlı adresler: info@, sales@, admin@ ve support@ gibi adresler genellikle bireyler yerine ekipler tarafından yönetilir. Daha yüksek şikayet oranlarına neden olurlar ve genellikle pazarlama listeleri için kötü tercihlerdir. Düzenli ifade kalıpları bunları güvenilir bir şekilde tanımlayamaz.
5. Spam tuzakları: Bunlar, e-posta teslim edilebilirliği kuruluşları tarafından liste hijyeni düşük göndericileri belirlemek için kullanılan e-posta adresleridir. Tamamen normal görünürler ve istemci tarafı doğrulamasından geçerler, ancak bunlara e-posta göndermek gönderici itibarınıza zarar verebilir.

DeBounce E-posta Doğrulama API'si, gerçek zamanlı posta kutusu düzeyinde kontroller ve sürekli güncellenen doğrulama verileri aracılığıyla beş sorunun tamamını yakalar. Uzun vadeli liste kalitesini korumak için, e-posta doğrulama araçları Ayrıca eski kişileri toplu olarak yeniden kontrol edebilir ve zamanla geçersiz hale gelen adreslerin kaldırılmasına yardımcı olabilirsiniz.

JavaScript'te E-posta Doğrulama İçin En İyi Uygulamalar

İyi bir e-posta doğrulama süreci, veri kalitesini, kullanıcı deneyimini ve teslim edilebilirliği artırmak için birden fazla kontrolü birlikte kullanır.

• Doğrulamanızı katmanlandırın: HTML5 e-posta özniteliğiyle başlayın, bir düzenli ifade veya doğrulama kütüphanesi ekleyin, ardından posta kutusu düzeyinde doğrulama için bir API çağrısı kullanın. Her katman, bir öncekinin gözden kaçırdığı sorunları yakalar; önceki kontroller ise ağ isteği beklemeden anında geri bildirim sağlar.
• Güvenlik açısından kritik süreçlerde yalnızca istemci tarafı doğrulamaya asla güvenmeyin: Tarayıcı tabanlı doğrulama atlanabilir, bu nedenle kayıt, satın alma veya hesap oluşturma işlemlerinden önce e-posta adresleri her zaman sunucuda tekrar doğrulanmalıdır.
• Özel düzenli ifadeleri uzun vadede sürdürmek yerine, kendini kanıtlamış bir kütüphane veya API kullanın: E-posta adresi biçimleri sürekli değişmektedir. Aktif olarak bakımı yapılan bir kütüphane veya API, kendi kalıplarınızı güncellemenize gerek kalmadan yeni uç durumları ele alır.
• API çağrılarını geciktirin ve net görsel geri bildirim sağlayın: API çalışırken bir yükleme göstergesi, başarı durumunda yeşil bir onay işareti ve başarısızlık durumunda belirli bir hata mesajı ("Bunu mu demek istediniz?"). [e-posta korumalı]Formun güncel kalmasını sağlayın ve terk etme oranını azaltın.
• Geliştirme sırasında doğrulama sonuçları: Tek kullanımlık e-posta sağlayıcıları, tekrarlanan yazım hataları ve şüpheli alan adları, günlükleri inceledikten sonra belirgin hale gelir ve bu da zaman içinde doğrulama kurallarını sıkılaştırmayı kolaylaştırır.
• Liste düzeyinde de doğrulama yapın: Gerçek zamanlı doğrulama, kayıt sırasında hatalı adresleri tespit ederken, E-posta Listesi Doğrulaması Sonradan devre dışı kalan adreslerin kaldırılmasına yardımcı olur.

Alt çizgi

HTML5 doğrulama, temel biçim kontrollerini ücretsiz olarak sunar. Düzenli ifadeler ve doğrulama kütüphaneleri, hızlı istemci tarafı geri bildirimiyle kullanıcı deneyimini iyileştirirken, API'ler bir posta kutusunun gerçekten var olup olmadığını ve e-posta alıp alamayacağını doğrular.

En önemli adım son adımdır. Yalnızca istemci tarafı doğrulama, bir adresin gerçek, aktif veya gönderim için güvenli olduğunu doğrulayamaz. Teslim edilebilirlik ve liste kalitesinin önemli olduğu üretim kayıt formlarında, API doğrulaması, tek kullanımlık e-postaların, yazım hatalı alan adlarının, her şeyi kapsayan adreslerin ve diğer kötü kişilerin veritabanınıza girmesini engeller.

DeBounce E-posta Doğrulama API'si Bu özellik, posta kutusu düzeyinde doğrulamayı doğrudan kayıt akışınıza ekleyerek, kötü adreslerin gönderici itibarınızı etkilemeden önce engellenmesine yardımcı olur. Daha hızlı bir kurulum istiyorsanız, JavaScript doğrulama aracı Kod yazmadan, formlarınıza doğrudan gerçek zamanlı e-posta doğrulama özelliği eklemenin bir yolunu sunar.