Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

JavaScript : les expressions régulières

Il faut adresser au serveur des données valides

Qui n'a jamais buté en essayant de remplir un formulaire. Il faut en effet que les données saisies respectent des formats; certains champs doivent obligatoirement être renseignés, il doit y avoir des cohérences entre différents champs, etc.
Il est préférable d'adresser au serveur des données valides donc contrôlées côté navigateur (ou côté client). Ce qui ne dispense d'un contrôle de saisie côté serveur (contrôle en PHP) pour des raisons que j'expliquerai plus loin.

Dans le cadre d'un contrôle de saisie côté client on associe à chaque champ une expression régulière. La saisie dans le champ est valide si elle correspond au format défini par l'expression régulière.

Exemple

Le code HTML & CSS

CSS :
Emploi des pseudo-classes :invalid et :valid sur les balises input.
Donc tant que la saisie dans un champ ne correspond ni au type de champ ni au pattern la saisie est en rouge mais passe au vert dès qu'elle correspond au motif.

HTML:
Envoi des donnés dans la même page avec la méthode GET (les données apparaissent dans la barre d'adresse).

Trois champs. Pour chaque champ :
• l'attribut required : saisie obligatoire pour qu'il y ait soumission
• l'attribut placeholder : message dans le champ avant saisie
• l'attribut pattern : contient une expression régulière

Avec HTML5 les expressions régulières deviennent des valeurs des attributs pattern.

Le type de champ "email" oblige à saisir un caractère @ et adapte le clavier des terminaux mobiles.
Mais une adresse mail valide c'est aussi un point après l'arobase. Aussi ai-je rajouté un pattern.

Le script

Grâce aux contrôles HTML découlant des attributs required, pattern il n'est plus nécessaire ici d'associer au formulaire un script de contrôle.

Rendu avec le navigateur

Construction d'une expression régulière

Dans l'exemple précédent vous avez rencontré une expression régulière : "[A-z0-9._-]+[@]{1}[A-z0-9._-]+[.]{1}[A-z]{2,10}".
Dans ce paragraphe je vais expliquer cette expression à priori très compliquée.

Une expression régulière est une suite de couples classes - quantificateurs.

Les classes

Une classe indique le ou les caractères autorisés à la saisie. On reconnait une classe car elle est entre crochets.
Une classe peut être un énumération de caractères autorisés ou un intervalle ou un mélange des deux.

Quelques exemples de classes sous forme de liste :
• [@] : seul l'arobase est autorisé
• [.-_] : seuls le point, le tiret et le souligné sont autorisés
• [éèê] : seuls les e accentués sont autorisés

Quelques exemples de classes sous forme d'intervalle :
• [a-z] : seules les lettres minuscules (de a à z) sont autorisées
• [A-z] : seules les lettres (minuscules et majuscules) sont autorisées
• [0-9] : seuls les chiffres sont autorisés

Exemples plus complexes :
• [A-z0-9] : deux intervalles ; les lettres et les chiffres sont autorisés
• [a-zéèê] : un intervalle suivi d'une liste ; les lettres minuscules y compris les e accentués sont autorisés

Les quantificateurs

Un quantificateur suit une classe et indique le nombre de caractères autorisés à saisir.
Un quantificateur est entre accolades.

Exemples de quantificateurs :
• {2} : saisir deux caractères autorisés
• {3,8} : saisir entre 3 et 8 caractères autorisés
• {3,} : saisir entre 3 et infini caractères autorisés

On peut exprimer plus simplement le quantificateur sous forme d'un symbole suivant la classe :
• * : caractère précédent de 0 à plusieur fois
• + : caractère précédent de 1 à plusieurs fois
• ? : caractère précédent de 0 à 1 fois

Analyse des difféntes expressions régulières de l'exemple

Des expressions simples

Maintenant vous devez être capable de comprendre les expressions régulières de l'exemple.

Expression associée à la saisie du numéro de téléphone :
[0-9]{10} : on ne peut saisir que des chiffres ; il faut en saisir 10 ni plus ni moins

Expression associée à la saisie du mot de passe :
[A-z0-9]{6,8} : on ne peut saisir que des lettres non accentuées et des chiffres ; entre 6 et 8

Expression associée à la saisie de l'adresse mail

[A-z0-9._-]+[@]{1}[a-zA-Z0-9._-]+[.]{1}[a-zA-Z]{2,10}
C'est un peu plus compliqué ... Il y a plusieurs couples "classes-quantificateurs"

Je vais décomposer :
• [A-z0-9._-]+ : le nom utilisateur ; au moins un caractère alphanumérique
• [@]{1} : un symbole @ obligatoirement
• [A-z0-9._-]+ : le fournisseur; au moins un caractère alphanumérique
• [.]{1} : impérativement un point
• [A-z]{2,10} : le domaine ; entre 2 et 10 caractères alphabétiques

J'aurai pu remplacer le quantificateur + par {1,}

Contrôles en PHP

Attention les contrôles de saisie par le navigateur (côté client) ne dispensent pas de contrôles côté serveur (en PHP). En effet le JavaScript peut être désactivé sur le navigateur ; il est facile pour un internaute chevronné de modifier le code du formulaire (supprimer par exemple les attributs de contrôle).

Ainsi sous Chrome appuyez sur F12 ; sélectionnez "éléments" ; sélectionnez une balise INPUT ; faites un clic droit ; sélectionnez "Edit as HTML".
Vous pouvez donc dans l'exemple supprimer les attributs "required" et "pattern" des 4 INPUT puis saisir n'importe quoi dans les champs.

Donc pour des raisons de sécurité il faut impérativement un contrôle côté serveur.

Le contrôle de saisie côté client a un rôle ergonomique : limiter les aller-retour entre le client et le serveur.
En effet en principe, grâce aux contrôles côté navigateur la soumission sera réussie dès la première tentative.

Expressions régulières dans un script

Dans certains cas le contrôle de saisie par le navigateur ne peut se limiter au HTML. Il faut complèter avec un script. Le contrôle de conformité d'une saisie à un gabarit peut alors se faire dans le script.

Thématique

Pour vous inscrire sur un site de rencontres coquin (lol) vous devez saisir en guise d'identifiant votre adresse mail et la confirmer puis choisir un mot de passe et le confirmer.
Le mot de passe doit contenir entre 6 et 8 caractères alphanumériques c'est à dire des lettres non accentuées et des chiffres. Les autres caractères sont bannis.
Avec HTML il est impossible de comparer le contenu du champ1 avec celui du champ2 ; comparer le contenu du champ3 avec celui du champ4. Il faut donc complèter le contrôle de saisie via HTML par un script !

Le code du formulaire

J'ai donné un nom au formulaire : name ="formulaire".

Le bouton de commande doit obligatoirement être de type submit sinon les contrôles HTML (grâce aux attributs required et pattern) ne sont pas effectués.
Concernant l'adresse mail le type "email" oblige à saisir un caractère @ mais pas le point après l'arobase.

Dans la balise form j'ai rajouté : onSubmit="return fenvoi()"

Expliquons cette formule étrange :
• si clic sur le bouton de soumission la fonction fenvoi() est exécutée
• si cette fonction retourne true alors tentative de soumission avec contrôles de saisie HTML. La soumission est effective si les conditions de saisie fixées par le HTML (attributs pattern et required) sont respectées
• si cette fonction retourne false la soumission est bloquée !

Le script

function fenvoi()
{
// variables
	var compteur =0 ;
	var mail1 = formulaire.mail1.value;
	var mail2 = formulaire.mail2.value;
	var passe1 = formulaire.passe1.value;
	var passe2 = formulaire.passe2.value;
	var gabarit = new RegExp("[A-z0-9._-]+[@]{1}[A-z0-9._-]+[.]{1}[A-z]{2,10}");
	// tests
	if (gabarit.test(mail1) ) compteur++; // mail1 correspond t-il au gabarit ?
	if(mail1 == mail2) compteur++;
	if(passe1 == passe2) compteur++;
	if (compteur < 3) {alert("champs mal renseignés");return false; }
	if (compteur==3) {alert("saisies correctes"); return true;}
} // fin fonction 

Pour référencer dans le script les champs j'ai utilisé la syntaxe : nomformulaire.nomchamp. Il s'agit d'une technique très ancienne mais toujours valide.

J'ai défini une expression régulière complexe correspondant au bon format d'une adresse mail dans la variable gabarit. Cette variable est un objet de type RegExp créée avec le constructeur ad hoc.
Je vérifie avec la méthode test() appliqué à l'objet RegExp si la saisie correspond à ce format.

Définir le gabarit de saisie de l'adresse mail dans le script plutôt que comme valeur de l'attribut pattern est une maladresse puisque si je saisie une adresse mail sans point après l'arobase, cette saisie sera considérée comme valide par le contrôle HTML (la saisie passe "au vert").
Mais cette maladresse est ici volontaire ; je veux vous montrer comment utiliser un objet de type RegExp dans un script.

La variable compteur est incrémentée à chaque fois qu'un test est vérifié.

Le script complète les contrôles de saisie HTML et vérifie :
• adresse mail comprend bien un point après arobase ?
• deux adresses mail identiques ?
• deux mots de passe identiques ?

Si compteur < 3 la fonction retourne false et donc pas de soumission.
Si compteur ==3 (tous les tests vérifiés) ; la fonction retourne true et donc soumission des donnés.

Rendu avec le navigateur

Premier essai :
Saisir : toto@freefr - toto@freefr - abcedef -abcdef
Les mails et mots de passe sont identiques mais le mail est incorrect (pas de point après @) donc pas de soumission.

Deuxième essai :
Saisir : toto@free.fr - toto@free.fr - abcedef -abcdef
Les mails et mots de passe sont identiques et le mail est correct (un point après @) donc soumission.