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



• 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';

• 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'));

• 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.
• On a déclaré une variable constante nommée “email” qui a la valeur d’un email de test.
• Et une autre variable nommée “isValid” qui est de type de données booléenne contient la valeur EmailValidator.validate(email).
• 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.