Formulaire et contrôle 'côté client' - les regExp

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.
Les formats de saisie à respecter sont définis à partir d'expressions régulières.
Les expressions régulières (ou plus simplement regExp) sont donc utilisées par HTML et JS pour le contrôle de saisie "côté client".

Je rappelle à cette occasion qu'un contrôle de saisie "côté client ou côté navigateur" ne dispense pas d'un contrôle de saisie "côté serveur" (donc le plus souvent en PHP).
En effet un visiteur expérimenté peut neutraliser les contrôles de saisie via HTML et JS, en accédant aux outils de développement du navigateur.

Dans ce chapitre je n'évoque que le contrôle de saisie 'côté client'. Pour le contrôle de saisie "côté serveur" je vous renvoie au chapitre : contrôle par PHP des données soumissionnées

Construction d'expressions régulières

Pour créer une regExp en JavaScript il faut utiliser le constructeur RegExp ou la créer de façon littérale.

Exemples de regExp simples

Le code du document HTML

On compare à chaque fois une regExp à une chaine via la méthode test(). ... <h4> <script> document.write("<br>des expressions régulières simples"); // les regExp définies let exp1 = new RegExp("@"); let exp2 = new RegExp("^B"); let exp3 = new RegExp("^B",'i'); let exp4 = new RegExp("s|x$"); let exp5 = new RegExp("[@\.]"); let exp6 = new RegExp("eau|au","gi"); let exp7 = new RegExp("^bonjour$","i"); let exp8 =/abc/i; // tests if (exp1.test("toto@freefr")) document.write("<p>Chaine contient @"); if (exp2.test("Bonjour") ) document.write("<p>Chaine commence par B maj."); if (exp3.test("bonjour") ) document.write("<p>Chaine commence par b ou B"); if (exp4.test("formules") ) document.write("<p>Chaine se termine par s ou x"); if (exp4.test("travaux") ) document.write("<p>Chaine se termine par s ou x"); if (exp5.test("toto@free.fr")) document.write("<p>Chaine contient @ et ."); if (exp6.test("AU VIN sans EAU")) document.write("<p>Chaine contient 'eau' ou 'au' "); if(exp7.test("BONJOUR")) document.write("<p>Chaine coïncide strictement au gabarit"); if(!exp7.test("Mes amis, BONJOUR")) document.write("<p>Chaine ne coïncide pas strictement avec le gabarit"); if(exp8.test("ABCEFGH")) document.write("<p>Chaine contient le motif"); </script> </h4> ...

"@" : recherche de @ n'importe où dans la chaine
"^B" : recherche de B en début de chaine
"^B",'i' : recherche de B ou b en début de chaine. Le constructeur regExp() peut avoir deux paramètres : le motif puis une option (ou drapeau)
Ici l'option "i" signifie qu'on ne tient pas compte de la casse
"s|x$" : recherche de s OU x en fin de chaine ; | est l'opérateur OU
"[@\.]" : recherche @ ou du point ; Notez les crochets pour désigner une classe (voir ci-dessous).
Le . est un métacaractère c'est à dire un symbole utilisé dans la syntaxe des regExp.
Pour utiliser un métacaractère en tant que caractère recherché, il faut alors l'échapper.
"eau|au","gi" : recherche des suites "eau" OU "au" ; le drapeau "i", vous connaissez déjà; le drapeau "g" veut dire "global" donc recherche de toutes les occurrences.
"^bonjour$","i" : recherche de 'bonjour' sans tenir compte de la casse et uniquement de 'bonjour'

Pour la regExp "exp7" notez les symboles ^ et $ qui délimitent le motif ; donc la chaine qui est lui est comparée doit coïncider strictemement à ce format ni plus ni moins ; rien devant et rien derrière 'bonjour' ; par contre la comparaison est insensible à la casse grâce à l'option "i".

La dernière regExp (exp8) est créée de façon littérale ; le motif doit être entre deux / et suivi des éventuelles options.

Examinons les différents tests.
Tous les tests retournent true si concordance entre la regExp et la chaine sauf l'avant dernier (emploi de l'opérateur !) qui retourne true si divergence entre motif et chaine.

Le rendu

Vous verrez dans la troisième partie de ce chapitre qu'il existe d'autres méthodes applicables à une regExp ...

Les classes et quantificateurs

Les expressions régulières complexes sont une séquence de paires "classe-quantificateur".

Les classes

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

[aA] : seule la lettre A est autorisée
[\.-_] : seuls le point, le tiret et le souligné sont autorisés ; . est un métacaractère et doit être échappé
[aeiouéèê] : seules les voyelles sont autorisées

[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
[^0-9] : tous les caractères autorisés sauf les chiffres.

le ^ en début de classe juste après le crochet signifie "tout sauf ..."
Ne pas confondre avec le ^ en début de regExp qui signifie "début de chaine".

[A-z0-9] : deux intervalles ; les lettres min. et maj. ainsi que les chiffres sont autorisés
[A-zéèê] : un intervalle suivi d'une liste ; les lettres y compris les e accentués sont autorisées

Onb peut utiliser certains raccourcis pour exprimer les classes.

\d : chiffres ; équivaut à [0-9]
\D : tout les caractères sauf chiffres équivaut à [^0-9]
\w : n'importe quel caractère alphanumérique y compris underscore ; équivaut à [A-z0-9_]

Les quantificateurs

Un quantificateur suit obligatoirement une classe et indique le nombre de caractères autorisés.
Un quantificateur est délimité par des accolades.

{2} : saisir deux caractères autorisés, ni plus ni moins
{3,8} : saisir entre 3 et 8 caractères autorisés
{3,} : saisir au moins trois 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

Formulaire de soumission sans script JS

Les attributs pattern des champs de saisie ont pour valeur une regExp avec la même syntaxe que pour une regExp définie dans le cadre d'un script.

Le code CSS & HTML d'un document PHP

...
<style>
	input:valid {color : lime;}
	input:invalid {color : red;}
</style></head>
...
<form  id ="form" method ="post" action ="#">
<p><label>Saisissez adresse mail</label>
<input type="text" name="email"
		placeholder ="un @ suivi d'un point !" required
		pattern ="^\w{1,}@\w{2,}\.[A-z]{2,4}$" />
<p><label>Saisissez un pseudo</label>
<input type="text" name="pseudo"  
		placeholder ="entre 6 et 10 lettre minuscules et espace" required
		pattern ="^[a-z ]{6,10}$" />
		
<p><label>Saisissez  un mot de passe</label>
<input type="password" name="motpasse" maxlength = '8' required
		placeholder ="entre 6 et 8 caractères alphanumériques"
		pattern ="^\w{6,8}$" />

<p><label>Saisissez  un numéro de téléphone</label>
<input type="text" name="tel" maxlength = '10' required
	placeholder ="10 chiffres collés"
	pattern = "^\d{10}$" />
<p><button type ="submit">Envoyez les données</button>
</form>
...

Commentaire du code 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 pattern.

Commentaire du code du formulaire

Envoi des donnés dans la même page avec la méthode POST.
Un script PHP basique dont le code :
echo "<h4>Vous êtes bien connecté</h4>";

l'attribut required : saisie obligatoire pour qu'il y ait soumission
l'attribut placeholder : message dans le champ avant saisie pour orienter cette saisie
l'attribut pattern : contient une regExp qui commence qui exige un coïncidence parfaite entre la saisie et le format

Analyse des différentes expressions régulières du formulaire de soumission

Le pattern associé au champ "email"

La regExp est :^\w{1,}@\w{2,}\.[A-z]{2,4}$

Structure d'une adresse mail

Une adresse e-mail est un identifiant unique permettant d'envoyer et de recevoir des messages électroniques.

partie locale : avant le symbole @, elle représente l'identifiant choisi par l'utilisateur.
symbole @ : séparateur obligatoire entre la partie locale et le domaine.
domaine : après le symbole @, il indique le fournisseur de l'adresse (ex : gmail.com, free.fr, ...)

Le domaine contient obligatoirement un point encadré par les lettres maj. et min.

Patterns associés aux autres champs

pour le champ 'pseudo' : ^[a-z ]{6,10}$ ; entre 6 et lettres minuscules et espace
pour le champ 'motpasse' : ^\w{6,8}$ ; entre 6 et 8 caractères alphanumériques
pour le champ 'tel' : ^\d{10}$ ; 10 chiffres ni plus ni moins sans espaces ou autres séparateurs

Rendu avec le navigateur

Saisissez des bêtises dans les champs :
adresse mail sans @ ou sans . ;
pseudo avec des chiffres
mot de passe trop long
n° de téléphone avec des lettres ou trop court ou trop long ou des séparateurs entre les paires

les saisies restent alors en rouge et la soumission est bloquée.

Puis faites des saisies en respectant les consignes : les saisies passent au vert et la soumission est effective.

Formulaire de soumission avec un script JS

Dans certains cas le contrôle de saisie "côté client" ne peut se limiter à du HTML (comme dans l'exemple précédent) ; il faut complèter avec un script JS qui éventuellement interdit la soumission même si tous les champs de saisie sont passés au vert ...

Thématique

Pour vous inscrire sur un site de rencontres 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 les "values" de deux champs de saisie.
Il faut donc complèter le contrôle de saisie en HTML par un script qui va effectuer des comparaisons deux par deux.

Le code CSS & HTML du document HTML

...
	input:valid {color : lime;}
	input:invalid {color : red;}
...
<form name ="form" id ="form"  action = "inscription_trait.php"  method ='post'>
<h3>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe.</h3>
     <p><label>Tapez votre adresse mail : </label>	
		<input type = "text" required  name ='mail1'  pattern ="^\w{1,}@\w{2,}\.[A-z]{2,4}$">
	 <p><label>Confirmez votre adresse mail : </label>	
		<input type = "text" required name ='mail2' pattern ="^\w{1,}@\w{2,}\.[A-z]{2,4}$">
	<p><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'>
	<p><label>Confirmer le mot de passe : </label>
		<input type = "password" required  pattern = '^[A-z0-9]{6,8}$'  
			maxlength ='8' name ='passe2' >
    <p><label></label><button type ="submit"> inscription</button>
</form>

J'ai donné un nom et un Id au formulaire.
Chaque champ de saisie a un nom : mail1, mail2, passe1 & passe2.
Chaque champ de saisie a l'attribut pattern

Le script

Le script est rédigé en JS moderne : utilisation de la méthode preventDefault() appliquée à l'objet de type event. Cette méthode annule le comportement par défaut du navigateur.

document.getElementById('form').onsubmit = function(event) 
{
  if (form.mail1.value == form.mail2.value 
	&& form.passe1.value == form.passe2.value) alert('soumission effectuée'); 
  else  {event.preventDefault();    alert("Erreurs de saisie !" ); }
} // fin fonction anonyme

Le script est exécuté lors de la tentative de soumission (clic sur le bouton "submit").
Dans le script JS on vérifie si on a bien saisi deux fois la même adresse mail et si on a bien saisi deux fois le même mot de passe.
Si le test retourne true : alors comportement par défaut du navigateur c'est à dire soumission.
Par contre si le test retourne false la soumission est annulée.
Il est inutile dans le script de comparer chaque "value" par rapport à une regExp puisque ce contrôle est déjà effectué via le code HTML.

Rendu avec le navigateur

Premier essai

Saisir : toto@free.fr - tata@free.fr - abcedef - bcdefg
Les adresses mail et les mots de passe sont valides ; tout est au vert mais la soumission échoue ... pourquoi ?

Deuxième essai

Saisir : toto@free.fr - toto@free.fr - sesame - sesame
Les adresses mail et les mots de passe sont valides ; tout est au vert ; la soumission réussit ... pourquoi ?

Les autres méthodes applicables à une instance de type regExp

Dans le cadre du premier script JS nous avions manipuler des regExp avec la méthode test().
Mais il existe d'autres méthodes applicables à une regExp ...

Exemple 1 : les autres méthodes

Le code du document HTML

...
<h3>Les méthodes applicables à une instance de regExp</h3>
<script>
let regDate = new RegExp("[0-9]{1,}[-/]{1}[0-9]{1,}[-/]{1}[0-9]{4}","g");

let message =`Notre magasin sera fermé du 24-12-2025 au dimanche 04-01-2026 inclus. 
En d'autres termes du 23/12/2025 au soir jusqu'au 05/01/2026.` ; 

// méthode test
if (regDate.test(message)) document.write("<p>Au moins une date existe dans la chaine");

// méthode exec
let date1 = regDate.exec(message);
document.write("<p>Première date trouvée dans la chaine multiligne : " + date1); 

// méthode search
let indice = message.search(regDate);
document.write("<p>La première occurence de la regExp dans la chaine a l'indice : " + indice); 

// méthode match
document.write("<p>Toutes les dates trouvées dans la chaine multilignes"); 
let tableau = message.match(regDate); 
console.log(tableau); 
for (element of tableau) document.write("<p>La date est : " + element); 

// méthode replace
document.write("<p>Remplacer les dates dans la chaine multilignes");
message = message.replace(regDate,' ... '); 
document.write("<P>" + message); 
...

Observez bien la regExp : seuls les formats JJ/MM/AAAA ou JJ-MM-AAAA sont autorisés pour saisir une date.

Rappel : la méthode test() retourne un booléen : true si une occurence de la regExp existe dans la chaine.
La méthode exec() retourne la première occurence de la regExp dans la chaine ou NULL.
La méthode search() retourne l'indice de la première occurence de la regExp dans la chaine OU -1 si recherche infructueuse.
La méthode match() retourne toutes les occurences de la regExp dans la chaine sous forme d'un tableau.
La méthode replace()remplace toutes les occurences de la regExp par une nouvelle occurence OU la première occurence selon l'existence (ou pas) du drapeau "g" dans la définition de la regExp.

Attention on rencontre deux syntaxes :
regExp.méthode(chaine) : pour les méthodes test(), exec()
chaine.méthode(regExp) : pour les méthodes search(),match(), replace()

La méthode replace() exige deux paramètres : regExp,remplacéPar.

Le rendu

Exemple 2 : alternative à replace()

Dans ce deuxième exemple je vous montre une autres solution pour des remplacements dans une chaine.
La méthode replaceAll() a été introduite avec la version ECMAScript de 2021. Donc elle n'est pas compatible avec les anciens navigateurs.

Le code du document HTML

la méthode historique replace() dont le premier paramètre est une regExp
la méthode moderne replaceAll() argumentée avec un 'pattern'

...
let exp1 = new RegExp('[\*]','g'); 
let exp2 = new RegExp('[\-]','g'); 

let chaine1 = "****toto****"; 
let chaine2 = "-----titi-----"; 

let chaine11 = chaine1.replace(exp1,''); 
let chaine22 = chaine2.replace(exp2,''); 

document.write("<p>" + chaine1 + " est devenue :" + chaine11 ); 
document.write("<p>" + chaine2 + " est devenue :" + chaine22 );

let chaine3 = "-----coucou*****"; 
let chaine33 = chaine3.replaceAll('-','').replaceAll('*',''); 
document.write("<p>" + chaine3 + " est devenue :" + chaine33 );
...

Dans la méthode replaceAll() le 'pattern' peut être une simple chaine (et non pas une regExp). Donc il est inutile d'échapper les métacaractères (*,-,?,^,$,?, ...).
Dans une même instruction on peut chainer plusieurs fois la méthode replaceAll().

Traduction

Tutoriel sur Javascript

JavaScript : les bases

Framework historique : jQuery

Framework de nouvelle génération : Vue.js

Node.js : JavaScript 'côté serveur'

Recherche dans ce tuto

L'auteur : Patrick Darcheville

Formulaire et contrôle 'côté client' - les regExp

Construction d'expressions régulières

Exemples de regExp simples

Le code du document HTML

Le rendu

Les classes et quantificateurs

Les classes

Les quantificateurs

Formulaire de soumission sans script JS

Le code CSS & HTML d'un document PHP

Commentaire du code CSS

Commentaire du code du formulaire

Analyse des différentes expressions régulières du formulaire de soumission

Le pattern associé au champ "email"

Structure d'une adresse mail

Patterns associés aux autres champs

Rendu avec le navigateur

Formulaire de soumission avec un script JS

Thématique

Le code CSS & HTML du document HTML

Le script

Rendu avec le navigateur

Premier essai

Deuxième essai

Les autres méthodes applicables à une instance de type regExp

Exemple 1 : les autres méthodes

Le code du document HTML

Le rendu

Exemple 2 : alternative à replace()

Le code du document HTML

Le rendu