Validation des e-mails dans Flutter

Objectif

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

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.

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

Validation des e-mails dans Flutter

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

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

Validation des e-mails dans Flutter

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.

Flutter

Validation des e-mails dans Flutter