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'explique 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

...
<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 :
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).

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

Rendu avec le navigateur

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.

[@] : seul l'arobase est autorisé
[.-_] : seuls le point, le tiret et le souligné sont autorisés
[éèê] : seuls les e accentués sont autorisés

[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

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

{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

* : 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"

[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

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 première soumission sera fructueuse.

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()"

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 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 dans un script.

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

adresse mail avec @ suivi d'un point ?
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.

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JavaScript : les expressions régulières

Il faut adresser au serveur des données valides

Exemple

Le code HTML & CSS

Le script

Rendu avec le navigateur

Construction d'une expression régulière

Les classes

Les quantificateurs

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

Des expressions simples

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

Contrôles en PHP

Expressions régulières dans un script

Thématique

Le code du formulaire

Le script

Rendu avec le navigateur