Cara menggunakan JavaScript untuk melaksanakan fungsi pengesahan automatik apabila kotak input e-mel hilang fokus

Dengan perkembangan pesat Internet, e-mel telah menjadi bahagian yang amat diperlukan dalam kehidupan dan pekerjaan harian orang ramai. Terdapat juga lebih banyak senario penggunaan untuk e-mel, seperti rangkaian sosial, kerja, perniagaan, dll. Untuk tapak web dan aplikasi, pengesahan e-mel juga telah menjadi pautan penting. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi pengesahan automatik apabila kotak input e-mel hilang fokus.

Pertama sekali, kita perlu menjelaskan format e-mel dan jenis rentetan e-mel itu. Format e-mel biasa terdiri daripada nama pengguna dan nama domain, disambungkan dengan simbol "@". Contohnya, alamat e-mel yang lengkap mungkin example@domain.com. Jika rentetan yang kami masukkan mematuhi format ini, maka kami boleh menganggapnya sebagai alamat e-mel yang sah.

Seterusnya, kami melaksanakan fungsi kehilangan e-mel pengesahan fokus melalui kod JavaScript.

Langkah pertama ialah mendapatkan nilai dalam kotak input. Dapatkan nilai dalam kotak input e-mel melalui getElementById atau kaedah pemilih lain.

var emailInput = document.getElementById("email");
var email = emailInput.value;

Langkah kedua ialah mengesahkan format e-mel. Dalam JavaScript, anda boleh menggunakan ungkapan biasa untuk mengesahkan sama ada rentetan mematuhi format tertentu. Untuk pengesahan e-mel, kami boleh menggunakan ungkapan biasa berikut:

var emailPattern = /^[^\.][\w.-]+@\w+(\.\w+)+\w$/;

Maksud ungkapan biasa ini ialah pertama rentetan tidak boleh bermula dengan titik, dan kemudian huruf, nombor, garis bawah, titik dan sempang diterima , simbol @ mesti diikuti dengan tempoh huruf Inggeris, dan titik serta huruf Inggeris diterima. w terakhir ialah penamat, pastikan hujungnya semua huruf atau nombor Inggeris.

Kemudian kami menggunakan ungkapan biasa ini untuk mengesahkan sama ada e-mel yang dimasukkan oleh pengguna memenuhi keperluan format.

if (emailPattern.test(email)) {
  // 邮箱格式正确
} else {
  // 邮箱格式错误
}

Langkah ketiga ialah memberi maklum balas hasil pengesahan kepada pengguna. Kami boleh menukar warna dan kandungan sempadan kotak input secara dinamik dan maklumat segera berdasarkan hasil pengesahan.

if (emailPattern.test(email)) {
   emailInput.style.borderColor = "";
   emailInput.style.backgroundColor = "";
   emailHint.innerHTML = "";
} else {
   emailInput.style.borderColor = "red";
   emailInput.style.backgroundColor = "#FFE3E3";
   emailHint.innerHTML = "邮箱格式不正确！请重新输入。";
}

Dalam coretan kod ini, apabila format e-mel betul, kami menetapkan warna sempadan dan warna latar belakang kotak input kepada kosong, dan maklumat segera dikosongkan apabila format e-mel tidak betul; kami menetapkan warna sempadan dan warna latar belakang kotak input kepada kosong Warna sempadan ditetapkan kepada merah, warna latar belakang ditetapkan kepada merah jambu cerah dan mesej ralat digesa kepada pengguna.

Langkah terakhir ialah mengikat keputusan pengesahan kepada proses penyerahan borang. Kami boleh melaksanakan pengesahan automatik dengan mendengar acara onblur kotak input e-mel.

emailInput.onblur = function() {
   // 验证邮箱格式
}

Ini akan memanggil fungsi pengesahan secara automatik apabila pengguna mengalihkan fokus selepas memasukkan alamat e-mel mereka.

Melalui langkah di atas, kami boleh menggunakan JavaScript untuk melaksanakan fungsi pengesahan automatik apabila kotak input e-mel hilang fokus.

Secara keseluruhan, e-mel pengesahan hilang fokus JavaScript ialah ciri yang sangat berguna. Ia secara berkesan boleh menghalang pengguna daripada menyerahkan alamat e-mel yang tidak sah semasa mengisi borang, dan boleh meningkatkan kecekapan dan pengalaman pengguna mengisi borang. Bagi pembangun tapak web dan aplikasi, memahami cara ciri ini dilaksanakan boleh membolehkan mereka membangunkan tapak web dan aplikasi yang lebih stabil dan mesra pengguna.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan fungsi pengesahan automatik apabila kotak input e-mel hilang fokus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!