Validation des e-mails dans Flutter

Validation des e-mails dans Flutter

1. Objectif

   • Cet article explique comment valider un e-mail TextField en flutter.

2. Présentation

   • La validation des e-mails est une partie importante de chaque application qui utilise l'authentification dans l'application.
   • Voici les règles pour une adresse e-mail valide.
     • L'e-mail comporte différentes parties valides - nom de l'expéditeur, symbole @ et nom de domaine
     • Les noms de destinataire et de domaine peuvent contenir des chiffres en minuscules et en majuscules
     • Le nom de domaine contient une extension séparée par un point (.)
     • Les caractères spéciaux sont autorisés dans le nom de l'expéditeur
     • La longueur du nom de l'expéditeur est de 64 caractères
     • Le nom de domaine est de 256 caractères
   • Pour vérifier l'adresse e-mail, nous pouvons utiliser un modèle regEx, qui est un peu plus complexe à construire.
   • Au lieu d'utiliser le modèle regEx (expressions régulières), nous pouvons utiliser le package le plus cool de pub.dev appelé email_validator pour obtenir le même résultat. Dans cet article, nous allons nous intéresser au package email_validator.
   • email_validator est une simple classe Dart pour valider les adresses e-mail sans utiliser RegEx.

3. Validation des e-mails Flutter à l'aide d'une expression régulière

   • Pour valider des e-mails dans Flutter, vous pouvez utiliser une expression régulière pour vérifier le format de l'adresse e-mail. Voici un exemple de code :

   String email = ...;
   String pattern = r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
   RegExp regExp = RegExp(pattern);
   if(regExp.hasMatch(email)) {
     print('Email valide');
   } else {
     print('Email non valide');
   }
   

   • Ce code vérifie si l'adresse e-mail correspond au format standard de l'adresse e-mail (xxx@yyy.zzz).
   • Dans l'exemple suivant, nous utiliserons RegExp pour valider le champ de texte de l'e-mail. Il s'agira d'un formulaire de validation d'e-mail en temps réel lorsque l'utilisateur tape dans le formulaire. Nous vérifierons la validation pour chaque chaîne saisie par l'utilisateur.

   Code de l'exemple

   Afficher le code

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     // This widget is the root of your application.
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Validation d\'émail',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key}) : super(key: key);
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     final GlobalKey<FormState> _formkey = GlobalKey<FormState>();
     //TextController to read text entered in text field
     TextEditingController textEditingControllerEmail = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Form(
               key: _formkey,
               child: Padding(
                 padding: const EdgeInsets.only(bottom: 15, left: 10, right: 10),
                 child: TextFormField(
                   controller: textEditingControllerEmail,
                   onChanged: (val) {
                     _formkey.currentState?.validate();
                   },
                   keyboardType: TextInputType.text,
                   decoration: buildInputDecoration(Icons.email, "Email"),
                   validator: (value) {
                     //print(value);
                     if (value!.isEmpty) {
                       return "Veuillez saisir un e-mail";
                       //r'\S+@\S+\.\S+'
                     } else if (!RegExp(
                             r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')
                         .hasMatch(value)) {
                       return "Veuillez saisir un e-mail valide";
                     }
                     return null;
                   },
                 ),
               ),
             ),
           ],
         ),
       );
     }
   }
   
   // TextFormField Border Decoration
   InputDecoration buildInputDecoration(IconData icons, String hinttext) {
     return InputDecoration(
       hintText: hinttext,
       prefixIcon: Icon(icons),
       focusedBorder: OutlineInputBorder(
         borderRadius: BorderRadius.circular(15.0),
         borderSide: const BorderSide(color: Colors.green, width: 1.5),
       ),
       border: OutlineInputBorder(
         borderRadius: BorderRadius.circular(15.0),
         borderSide: const BorderSide(
           color: Colors.blue,
           width: 1.5,
         ),
       ),
       enabledBorder: OutlineInputBorder(
         borderRadius: BorderRadius.circular(15.0),
         borderSide: const BorderSide(
           color: Colors.blue,
           width: 1.5,
         ),
       ),
     );
   }
   

   Résultat après exécution

   

   • Dans l'exemple suivant, nous utiliserons RegExp pour valider le champ de texte de l'e-mail. Il s'agira d'un formulaire de validation d'e-mail avec un bouton lorsque l'utilisateur tape dans le formulaire. Nous vérifierons la validation après l'appuie sur le bouton.

   Code de l'exemple

   Afficher le code

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         // Hide the debug banner
         debugShowCheckedModeBanner: false,
         title: 'validation Email',
         theme: ThemeData.light(),
         home: const HomePage(),
       );
     }
   }
   
   class HomePage extends StatefulWidget {
     const HomePage({Key? key}) : super(key: key);
   
     @override
     State<HomePage> createState() => _HomePageState();
   }
   
   class _HomePageState extends State<HomePage> {
     final _form = GlobalKey<FormState>();
     bool _isValid = false;
   
     void _saveForm() {
       setState(() {
         _isValid = _form.currentState!.validate();
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('Validation d\'Email avec RegExp'),
         ),
         body: Padding(
           padding: const EdgeInsets.all(25),
           // the Form here
           child: Form(
             key: _form,
             child: Column(
               children: [
                 TextFormField(
                   //decoration:
                   //const InputDecoration(labelText: 'Enter your email'),
                   decoration:
                       buildInputDecoration(Icons.email, "Entrer votre Email"),
                   keyboardType: TextInputType.emailAddress,
                   validator: (value) {
                     // Check if this field is empty
                     if (value == null || value.isEmpty) {
                       return 'Ce champ est obligatoire';
                     }
   
                     // using regular expression
                     if (!RegExp(r'\S+@\S+\.\S+').hasMatch(value)) {
                       return "S'il vous plaît, mettez une adresse email valide";
                     }
   
                     // the email is valid
                     return null;
                   },
                 ),
                 const SizedBox(height: 25),
                 ElevatedButton(
                     onPressed: _saveForm, child: const Text('Vérifier l\'email')),
                 const SizedBox(height: 25),
                 _isValid ? const Text("Votre e-mail a l'air sympa!") : Container()
               ],
             ),
           ),
         ),
       );
     }
   }
   
   // TextFormField Border Decoration
   InputDecoration buildInputDecoration(IconData icons, String hinttext) {
     return InputDecoration(
       hintText: hinttext,
       prefixIcon: Icon(icons),
       focusedBorder: OutlineInputBorder(
         borderRadius: BorderRadius.circular(15.0),
         borderSide: const BorderSide(color: Colors.green, width: 1.5),
       ),
       border: OutlineInputBorder(
         borderRadius: BorderRadius.circular(15.0),
         borderSide: const BorderSide(
           color: Colors.blue,
           width: 1.5,
         ),
       ),
       enabledBorder: OutlineInputBorder(
         borderRadius: BorderRadius.circular(15.0),
         borderSide: const BorderSide(
           color: Colors.blue,
           width: 1.5,
         ),
       ),
     );
   }
   
   

   Résultat après exécution

   

4. Utiliser email_validator pour valider un email

   • Ajout d'email_validator dans le fichier pubspec.yaml

     • Ajoutez le plugin email_validator dans les dépendances du fichier pubspec.yaml. Cliquez ensuite sur la pub pour arriver en haut.

     
     dependencies:
       flutter:
         sdk: flutter
       email_validator: ^2.0.1
     

     

5. Importez le package email_validator dans le fichier main.dart.

   • Nous pouvons l'utiliser dans notre code Dart après avoir installé le package.

     	import 'package:email_validator/email_validator.dart';

6. Validation de l'adresse e-mail avec email_validator:

   • La méthode statique validate() de la classe EmailValidator sera utilisée pour valider l'adresse e-mail. Il renvoie une valeur booléenne ; si l'adresse e-mail est valide, la valeur renvoyée est true ; sinon, la valeur renvoyée est fausse.

     	const String email = 'test1234@gmail.com';
       final bool isValid = EmailValidator.validate(email);
       print('L'e-mail est-il valide ?' + (isValid ? 'Oui' : 'Non'));

7. Dans l'exemple ci-dessus, on a passé simplement l'adresse e-mail sous forme de chaîne à validate(..), qui renvoie une valeur booléenne.
8. On a déclaré une variable constante nommée "email" qui a la valeur d'un email de test.
9. Et une autre variable nommée "isValid" qui est de type de données booléenne contient la valeur EmailValidator.validate(email).
10. Le Emailvalidator.validate(email) renverra une valeur booléenne, si l'e-mail est correct ou valide, il renverra vrai, sinon il renverra faux. Le résultat est stocké dans la variable isValid , que nous pouvons utiliser pour notre validation.

Dans notre exemple, nous avons utilisé une instruction conditionnelle simple utilisant l'opérateur ternaire, si l'e-mail est valide, il imprimera "oui" et si l'e-mail n'est pas valide, il imprimera "Non" dans le terminal.