Gunakan jquery untuk melaksanakan pengesahan e-mel

Dalam era digital dan rangkaian hari ini, e-mel telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian kita. Oleh itu, melaksanakan pengesahan e-mel (Pengesahan E-mel) telah menjadi kemahiran yang diperlukan untuk pembangun menulis aplikasi web. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan pengesahan e-mel menggunakan jQuery.

1. Pengetahuan prasyarat

Sebelum kita mula membincangkan cara menggunakan jQuery untuk melaksanakan pengesahan e-mel, kita perlu mengetahui beberapa peraturan biasa untuk alamat e-mel. Alamat e-mel mempunyai dua bahagian utama: nama pengguna dan nama domain, dipisahkan oleh simbol "@". Nama pengguna boleh mengandungi huruf, nombor, titik (.) dan garis bawah (_), dan boleh bermula dengan huruf atau nombor, tetapi tidak dengan titik atau garis bawah. Nama domain mesti mengandungi noktah dan bahagian terakhir mestilah kod alfanumerik dua hingga enam huruf (seperti .com atau .cn).

2. Analisis Keperluan

Sebelum kita mula menulis kod, kita perlu menjelaskan keperluan dan matlamat kita. Dalam kes ini, kita perlu melaksanakan aspek berikut:

(1) Apabila pengguna mengisi alamat e-mel, ia perlu disahkan mengikut peraturan di atas.

(2) Sebelum pengguna cuba menyerahkan borang, alamat e-mel perlu disahkan untuk sah.

(3) Jika alamat e-mel tidak sah, mesej ralat perlu dipaparkan.

3. Menulis Kod

Sekarang, kita boleh mula menulis kod. Pertama, kita perlu mencipta kotak input dalam kod HTML dan menambah kelas padanya untuk mengenal pasti ia sebagai kotak input alamat e-mel yang ingin kita sahkan:

<label for="email">电子邮件地址：</label>
<input type="text" name="email" id="email" class="email-input">
<span class="email-error">请输入一个有效的电子邮件地址。</span>

Dalam kod di atas, kami menggunakan "label" elemen untuk melabel kotak input dan mengaitkannya dengan elemen "input". Kami juga menambah nama kelas "e-mel-input" pada kotak input supaya kami boleh merujuknya kemudian dalam kod jQuery. Kod HTML kotak mesej ralat adalah seperti berikut:

<span class="email-error">请输入一个有效的电子邮件地址。</span>

Dalam kod di atas, kami menggunakan elemen "span" untuk mentakrifkan kotak mesej ralat dan kemudian mengaitkannya dengan nama kelas "email-error" . Secara lalai, kotak mesej ralat harus disembunyikan (paparan:tiada).

Sekarang, kita boleh mula menulis kod jQuery. Kami membahagikan kod kepada dua bahagian: fungsi pengesahan dan fungsi pencetus pengesahan.

3.1 Fungsi Pengesahan

Kami perlu menulis fungsi yang dipanggil "validateEmail" untuk mengesahkan alamat e-mel. Dalam fungsi ini, kami menggunakan ungkapan biasa untuk menyemak sama ada alamat e-mel sepadan dengan peraturan di atas:

function validateEmail(email) {
    var re = /^[w-.]+@([w-]+.)+[w-]{2,6}$/;
    return re.test(email);
}

Dalam kod di atas, kami menggunakan ungkapan biasa "/^[w-.]+@([ w -]+.)+[w-]{2,6}$/" untuk mengesahkan alamat e-mel. Ungkapan biasa mengandungi bahagian berikut:

(1) ^: Menunjukkan bahawa rentetan mesti bermula dengan bahagian permulaan ungkapan biasanya.

(2) [w-.]+: Mewakili bahagian nama pengguna alamat e-mel. Mengandungi huruf, nombor, noktah dan garis bawah. Memandangkan titik mempunyai makna istimewa dalam ungkapan biasa, ia perlu dilepaskan dengan mendahuluinya dengan garis serong ke belakang.

(3) @: Mewakili pemisah antara nama pengguna dan nama domain alamat e-mel.

(4) ([w-]+.)+: Mewakili bahagian nama domain alamat e-mel. Mengandungi satu atau lebih gabungan huruf, nombor, sempang dan noktah berturut-turut. Oleh kerana simbol "+" berada di luar kurungan, sekurang-kurangnya satu kombinasi mesti sepadan.

(5) [w-]{2,6}: Mewakili bahagian terakhir alamat e-mel (juga dikenali sebagai nama domain peringkat atas atau TLD). Ia mestilah gabungan dua hingga enam huruf atau nombor. Oleh kerana negara yang berbeza menggunakan TLD yang berbeza, julat {2,6} digunakan di sini.

(6)$: Menunjukkan bahawa rentetan mesti berakhir dengan bahagian akhir ungkapan biasanya.

Selepas menghantar alamat e-mel ke fungsi validateEmail, fungsi tersebut akan melaksanakan ungkapan biasa dan mengembalikan benar atau palsu untuk menunjukkan sama ada alamat itu sah.

3.2 Fungsi Pencetus Pengesahan

Sekarang, kita perlu menulis fungsi yang dipanggil "validateEmailField" untuk mengesahkan alamat e-mel dan menunjukkan atau menyembunyikan kotak mesej ralat jika perlu:

function validateEmailField() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (validateEmail(emailInput.val())) {
        emailError.hide();
    } else {
        emailError.show();
    }
}

Dalam kod di atas, kami mula-mula menggunakan pemilih jQuery untuk mendapatkan kotak input dan kotak mesej ralat. Kami kemudian memanggil fungsi "validateEmail" untuk menyemak sama ada alamat e-mel itu sah. Jika alamat e-mel adalah sah, kotak mesej ralat disembunyikan. Jika tidak, paparkan kotak mesej ini.

Kini, kami juga perlu menambah pendengar pada kotak input untuk mencetuskan pengesahan secara automatik apabila pengguna mengisi alamat e-mel mereka:

$('.email-input').on('keyup', function() {
    validateEmailField();
});

Dalam kod di atas, kami menggunakan pendengar jQuery untuk memantau sebarang kekunci yang dimasukkan oleh pengguna ke dalam kotak input dan kemudian panggil fungsi "validateEmailField" untuk mengesahkan alamat e-mel yang dimasukkan.

Akhir sekali, jika kami ingin mengesahkan semua medan input sebelum borang diserahkan, kami boleh menambah kod berikut:

$('form').submit(function() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (!validateEmail(emailInput.val())) {
        emailError.show();
        return false;
    }
    return true;
});

Dalam kod di atas, kami telah menambah pendengar untuk memantau acara penyerahan borang dan kemudian semak sama ada alamat e-mel itu sah. Jika alamat e-mel tidak sah, paparkan kotak mesej ralat dan kembalikan palsu untuk mengelakkan penyerahan borang. Jika tidak, borang akan diserahkan.

4. Kesimpulan

Dalam artikel ini, kami menunjukkan cara melaksanakan pengesahan alamat e-mel menggunakan jQuery. Kami menggunakan ungkapan biasa untuk mengesahkan format alamat e-mel dan menulis dua fungsi JavaScript untuk melengkapkan proses pengesahan. Akhir sekali, kami juga menunjukkan cara untuk menyepadukan pengesahan alamat e-mel ke dalam borang web untuk memastikan kesahihan input pengguna. Teknik ini sangat berguna dalam banyak aplikasi web, jadi kami mengesyorkan agar anda menguasainya untuk meningkatkan kemahiran pembangunan web anda.

Atas ialah kandungan terperinci Gunakan jquery untuk melaksanakan pengesahan e-mel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!