Maison  >  Article  >  interface Web  >  Comment déterminer si l'adresse e-mail est valide dans jquery

Comment déterminer si l'adresse e-mail est valide dans jquery

PHPz
PHPzoriginal
2023-04-10 09:47:571171parcourir

JQuery est une bibliothèque Javascript populaire, et sa syntaxe flexible et pratique en a fait l'un des outils nécessaires au développement front-end. Dans les applications Web, les adresses e-mail doivent souvent être vérifiées. Alors, comment utiliser JQuery pour déterminer si l’adresse email est valide ? Nous explorerons cette question ci-dessous.

Avant de juger de l'adresse e-mail, nous devons d'abord clarifier ce qu'est une adresse e-mail valide. Une adresse email valide doit respecter les règles suivantes :

  1. doit contenir le symbole "@" qui sépare le nom d'utilisateur et le nom de domaine.
  2. Doit contenir un nom de domaine de premier niveau (tel que .com, .cn, .org, etc.).
  3. Le nom de domaine doit contenir au moins un symbole "." pour séparer les différents noms de domaine.

Voyons maintenant comment utiliser JQuery pour la vérification des e-mails.

Étape 1 : Obtenir l'adresse e-mail saisie par l'utilisateur

Nous devons utiliser JQuery pour obtenir l'adresse e-mail saisie par l'utilisateur. Parmi eux, nous pouvons utiliser la méthode val() de JQuery pour obtenir la valeur dans la zone de saisie. L'exemple de code est le suivant :

var email = $('#email_input').val();

Où, #email_input est l'identifiant de la zone de saisie utilisateur. #email_input 是用户输入框的id。

第二步:正则表达式验证邮箱地址

获取到用户输入的邮箱地址之后,我们需要使用正则表达式来验证邮箱地址是否有效。JQuery使用 RegExp 对象来进行正则表达式匹配。

在使用正则表达式之前,我们需要知道正则表达式的规则。一个基本的邮箱地址正则表达式如下:

var emailPattern = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

其中,正则表达式被封装在一个斜杠 (/) 中。它包含三个部分,分别是:

  1. 用户名:包含小写字母、数字、下划线、点、短横线,可以重复出现。
  2. 域名:包含小写字母、数字、点、短横线,可以重复出现。
  3. 顶级域名:包含小写字母和点。

正则表达式验证代码如下:

if(emailPattern.test(email)){
  // valid email
} else {
  // invalid email
}

其中,test() 方法用于检查一个字符串是否匹配某个模式。如果邮箱地址符合模式,test() 方法将返回 true,否则返回 false。

第三步:显示验证结果

在检查用户输入的邮箱地址之后,我们需要将验证结果显示给用户。可以使用JQuery的 text()html() 方法来显示验证结果。示例代码如下:

if(emailPattern.test(email)){
  $('#email_validation_message').text('该邮箱地址有效!');
} else {
  $('#email_validation_message').text('该邮箱地址无效!');
}

其中,#email_validation_message

Étape 2 : Vérifier l'adresse e-mail avec une expression régulière

Après avoir obtenu l'adresse e-mail saisie par l'utilisateur, nous devons utiliser des expressions régulières pour vérifier si l'adresse e-mail est valide. JQuery utilise des objets RegExp pour la correspondance d'expressions régulières.

Avant d'utiliser des expressions régulières, nous devons connaître les règles des expressions régulières. Une expression régulière d'adresse e-mail de base est la suivante : 🎜rrreee🎜où l'expression régulière est entourée d'une barre oblique (/). Il contient trois parties, à savoir : 🎜🎜🎜Nom d'utilisateur : il contient des lettres minuscules, des chiffres, des soulignements, des points et des tirets, et peut apparaître à plusieurs reprises. 🎜🎜Nom de domaine : contient des lettres minuscules, des chiffres, des points et des tirets et peut apparaître à plusieurs reprises. 🎜🎜Domaine de premier niveau : contient des lettres minuscules et des points. 🎜🎜🎜Le code de vérification des expressions régulières est le suivant : 🎜rrreee🎜Parmi eux, la méthode test() est utilisée pour vérifier si une chaîne correspond à un certain modèle. La méthode test() renverra true si l'adresse e-mail correspond au modèle, false sinon. 🎜🎜Étape 3 : Afficher les résultats de la vérification🎜🎜Après avoir vérifié l'adresse e-mail saisie par l'utilisateur, nous devons afficher les résultats de la vérification à l'utilisateur. Vous pouvez utiliser la méthode text() ou html() de JQuery pour afficher les résultats de validation. L'exemple de code est le suivant : 🎜rrreee🎜Où, #email_validation_message est l'identifiant de l'élément HTML utilisé pour afficher les résultats de la vérification. 🎜🎜Résumé🎜🎜Il est très simple d'utiliser JQuery pour déterminer si une adresse e-mail est valide. Il nous suffit d'obtenir l'adresse e-mail saisie par l'utilisateur et de la vérifier à l'aide d'expressions régulières. Si le résultat de la vérification est vrai, cela signifie que l'adresse e-mail est valide ; sinon, cela signifie que l'adresse e-mail n'est pas valide ; Dans le même temps, nous pouvons également utiliser JQuery pour afficher les résultats de la vérification afin que les utilisateurs puissent comprendre intuitivement les résultats de la vérification. 🎜

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn