Cara Memvalidasi Alamat Email di JavaScript

Memastikan Input Email yang Akurat:

Memvalidasi alamat email dalam JavaScript sangat penting untuk mencegah kesalahan dan memastikan integritas data. Baik Anda sedang mengembangkan formulir web atau halaman pendaftaran pengguna, validasi sisi klien dapat membantu menemukan kesalahan umum sebelum kesalahan tersebut mencapai server Anda.

Panduan ini akan menunjukkan cara menerapkan validasi email menggunakan JavaScript. Dengan melakukan pemeriksaan ini di awal proses, Anda dapat meningkatkan pengalaman pengguna dan menjaga data tetap bersih, sehingga mengurangi risiko email tidak valid yang mengganggu alur kerja Anda.

Memahami Skrip Validasi Email

Skrip sisi klien menggunakan JavaScript untuk memvalidasi alamat email dengan memeriksa input pengguna terhadap pola ekspresi reguler. Itu validateEmail fungsi memanfaatkan re.test() metode untuk mencocokkan string masukan dengan pola regex, memastikannya mengikuti format email standar. Dengan melampirkan pendengar acara ke acara pengiriman formulir, ini mencegah pengiriman formulir jika penggunaan email tidak valid event.preventDefault(). Pendekatan ini membantu menangkap kesalahan dasar sebelum data dikirim ke server, sehingga meningkatkan pengalaman pengguna dan integritas data.

Di sisi server, skrip memanfaatkan Node.js Dan Express untuk validasi backend. Itu bodyParser.urlencoded() middleware mem-parsing badan permintaan yang masuk, sedangkan app.post() metode menangani permintaan POST ke titik akhir yang ditentukan. Di dalam pengendali rute, hal yang sama validateEmail fungsi digunakan untuk memeriksa format email. Bergantung pada hasilnya, respons yang sesuai dikirim kembali ke klien. Menjalankan server ini dengan app.listen() memastikannya mendengarkan permintaan masuk pada port yang ditentukan, membuat backend siap untuk memvalidasi email secara efektif.

// Function to validate email format
function validateEmail(email) {
    const re = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;
    return re.test(String(email).toLowerCase());
}

// Example usage
const emailInput = document.getElementById('email');
const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
    if (!validateEmail(emailInput.value)) {
        alert('Please enter a valid email address.');
        event.preventDefault();
    }
});

// Required modules
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

// Function to validate email format
function validateEmail(email) {
    const re = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;
    return re.test(String(email).toLowerCase());
}

app.post('/submit', (req, res) => {
    const email = req.body.email;
    if (validateEmail(email)) {
        res.send('Email is valid');
    } else {
        res.send('Invalid email address');
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Teknik Validasi Email Tingkat Lanjut

Aspek lain dari validasi email adalah memeriksa validitas domain. Selain memastikan format email sudah benar, Anda dapat memverifikasi bagian domain dari alamat email. Hal ini dapat dilakukan dengan menggunakan pencarian DNS untuk mengonfirmasi bahwa domain tersebut memiliki catatan pertukaran surat (MX) yang valid. Langkah tambahan ini membantu memfilter email dengan domain yang tidak ada, sehingga meningkatkan akurasi validasi.

Dalam JavaScript, Anda dapat menggunakan API eksternal untuk melakukan pencarian DNS karena JavaScript saja tidak dapat menangani tugas ini. Dengan berintegrasi dengan layanan seperti DNS API, Anda dapat mengirim permintaan dengan bagian domain email, dan API akan merespons dengan status data MX. Metode ini memberikan mekanisme validasi email yang lebih kuat.

Teknik Validasi Email Tingkat Lanjut

Aspek lain dari validasi email adalah memeriksa validitas domain. Selain memastikan format email sudah benar, Anda dapat memverifikasi bagian domain dari alamat email. Hal ini dapat dilakukan dengan menggunakan pencarian DNS untuk mengonfirmasi bahwa domain tersebut memiliki catatan pertukaran surat (MX) yang valid. Langkah tambahan ini membantu memfilter email dengan domain yang tidak ada, sehingga meningkatkan akurasi validasi.

Dalam JavaScript, Anda dapat menggunakan API eksternal untuk melakukan pencarian DNS karena JavaScript saja tidak dapat menangani tugas ini. Dengan berintegrasi dengan layanan seperti DNS API, Anda dapat mengirim permintaan dengan bagian domain email, dan API akan merespons dengan status data MX. Metode ini memberikan mekanisme validasi email yang lebih kuat.