Comment utiliser JavaScript pour implémenter la fonction de vérification automatique lorsque la zone de saisie de l'e-mail perd le focus

Avec le développement rapide d'Internet, le courrier électronique est devenu un élément indispensable de la vie quotidienne et du travail des gens. Il existe également de plus en plus de scénarios d'utilisation du courrier électronique, tels que les réseaux sociaux, le travail, les affaires, etc. Pour les sites Web et les applications, la vérification des e-mails est également devenue un maillon essentiel. Cet article explique comment utiliser JavaScript pour implémenter la fonction de vérification automatique lorsque la zone de saisie de l'e-mail perd le focus.

Tout d'abord, nous devons clarifier quel est le format de l'e-mail et quel type de chaîne est l'e-mail. Le format de courrier électronique courant se compose d'un nom d'utilisateur et d'un nom de domaine, reliés par le symbole « @ ». Par exemple, une adresse e-mail complète pourrait être exemple@domaine.com. Si la chaîne que nous saisissons est conforme à ce format, alors nous pouvons la considérer comme une adresse e-mail valide.

Ensuite, nous implémentons la fonction de perte de focus des e-mails de vérification via le code JavaScript.

La première étape consiste à obtenir la valeur dans la zone de saisie. Obtenez la valeur dans la zone de saisie de l'e-mail via getElementById ou d'autres méthodes de sélection.

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

La deuxième étape consiste à vérifier le format de l'e-mail. En JavaScript, vous pouvez utiliser des expressions régulières pour vérifier si une chaîne est conforme à un format spécifique. Pour la vérification des e-mails, nous pouvons utiliser l'expression régulière suivante :

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

Ce que cette expression régulière signifie, c'est que d'abord la chaîne ne peut pas commencer par un point, puis elle accepte les lettres, les chiffres, les traits de soulignement, les points et les tirets, et le symbole @ doit être suivi d'un paragraphe de lettres anglaises, acceptant les points et les lettres anglaises. Le dernier w est le terminateur, assurez-vous que les extrémités sont toutes des lettres ou des chiffres anglais.

Ensuite, nous utilisons cette expression régulière pour vérifier si l'e-mail saisi par l'utilisateur répond aux exigences de format.

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

La troisième étape consiste à renvoyer les résultats de la vérification à l'utilisateur. Nous pouvons modifier dynamiquement la couleur et le contenu de la bordure de la zone de saisie et demander des informations en fonction des résultats de la vérification.

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

Dans cet extrait de code, lorsque le format de l'e-mail est correct, nous définissons la couleur de la bordure et la couleur d'arrière-plan de la zone de saisie sur vides, et les informations d'invite sont effacées lorsque le format de l'e-mail est incorrect, nous définissons la couleur de la bordure de ; la zone de saisie en rouge, la couleur d'arrière-plan est définie sur rose clair et l'utilisateur reçoit un message d'erreur.

La dernière étape consiste à lier les résultats de validation au processus de soumission du formulaire. Nous pouvons implémenter une vérification automatique en écoutant l'événement onblur de la zone de saisie de l'e-mail.

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

Cela appellera automatiquement la fonction de vérification lorsque l'utilisateur s'éloignera du focus après avoir entré son adresse e-mail.

Grâce aux étapes ci-dessus, nous pouvons utiliser JavaScript pour implémenter la fonction de vérification automatique lorsque la zone de saisie de l'e-mail perd le focus.

Dans l’ensemble, l’e-mail de vérification de perte de focus JavaScript est une fonctionnalité très utile. Il peut empêcher efficacement les utilisateurs de soumettre des adresses e-mail invalides lorsqu'ils remplissent des formulaires et peut améliorer l'efficacité et l'expérience des utilisateurs qui remplissent des formulaires. Pour les développeurs de sites Web et d’applications, comprendre comment cette fonctionnalité est implémentée leur permettra de mieux développer des sites Web et des applications plus stables et conviviaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!