Les expressions régulières

Envoyer 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) ; voir conclusion.

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

... <style> label,input, button {display : inline-block; width :30%; } input:valid {color : lime;} input:invalid {color : red;} </style> </head> <body> <form method ="get" action ="#"> <label>Saisissez adresse mail</label> <input type="email" name="email" maxlength = '30' placeholder ="un @ suivi d'un point" required pattern ="[A-z0-9._-]+[@]{1}[A-z0-9._-]+[.]{1}[A-z]{2,10}" > <br><label>Saisissez un mot de passe</label> <input type="password" name="motpasse" maxlength = '8' required placeholder ="entre 6 et 8 caractères alphanumériques (lettres et chiffres)" pattern ="[A-z0-9]{6,8}"> <br><label>Saisissez un numéro de téléphone</label> <input type="text" name="telephone" maxlength = '10' required placeholder ="10chiffres collés" pattern = "[0-9]{10}"> <br> <button type ="submit">Envoyez les données</button> </form> ...

CSS : tant que la saisie dans un champ ne correspond ni au type ni au pattern la saisie est en rouge mais passe au vert dès qu'elle correspond au motif.

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

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 nouveaux attributs HTML5 required, pattern il n'est plus nécessaire le plus souvent d'associer au formulaire un script de contrôle.
Testez ce code !

Construction d'une expression régulière

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.

Les quantificateurs

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

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"

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 JS peut être désactivé sur le navigateur. Avec certains outils un internaute chevronné peut 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 instruction input ; clic droit ; Edit as HTML. Ainsi vous pouvez 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 principe avec les contrôles côté navigateur actifs la première soumission est déjà la bonne.

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

... label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% ;} input:valid {color : lime;} input:invalid {color : red;} ... <form name ="formulaire" action = "inscription_trait.htm" method ='post' onsubmit="return fenvoi()" > <p>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe. <label>Tapez votre adresse mail : </label> <input type = "email" required placeholder = "n'oubliez pas @ et le point après @" name ='mail1'> <label>Confirmez votre adresse mail : </label> <input type = "email" required name ='mail2'> <label>Saisissez mot de passe :</label> <input type = "password" required pattern ='[A-z0-9]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres ou chiffres' name ='passe1'> <label>Confirmer le mot de passe : </label> <input type = "password" required pattern = '[A-z0-9]{6,8}' maxlength ='8' name ='passe2' > <label></label><button type ="submit"> inscription</button> </form>

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 @.

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

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}");
	// test
	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 JS 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 malgré l'absence de point après l'arobase la saisie va basculer en vert.
Mais cette maladresse est ici volontaire. je voulais vous montrer comment utiliser un objet de type RegExp en JS.

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

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.

Tests

Testez ce code !

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. Retour menu