Les Masques de Saisie : quand et comment les utiliser ?

Un Masque de Saisie permet de définir le format attendu dans un Champ De Saisie.

Étape 1 : Définissez votre masque de saisie

Expressions régulières simples

Vous pouvez très facilement créer des expressions régulières pour votre masque de saisie en utilisant les caractères A pour une lettre, N pour un nombre entier.

Voici des exemples :

• Une date : NN-NN-NNNN
• Une plaque d’immatriculation : AA-NNN-AA
• Un numéro de Sécurité Sociale : N NN NN NN NNN NNN NN

Expressions régulières complexes

Pour vous aider à créer des expressions régulières complexes, vous pouvez vous aider du site internet Regex101.com.

Voici une chaîne rassemblant différentes familles :

/^(?=.*[A-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@])(?!.*[iIoO])\S{6,12}$/

• /^ ces symboles placés en premier indiquent tout simplement le début de notre chaîne.
• (?=.*[A-z]) permet de tester la présence de lettre (minuscule ou majuscule).
• (?=.*[a-z]) permet de tester la présence de minuscules.
• (?=.*[A-Z]) permet de tester la présence de majuscules.
• (?=.*[0-9]) permet de tester la présence de chiffres.
• (?=.*[$@]) permet de tester la présence de caractères spéciaux parmi $ et @.
• (?!.*[iIoO]) permet de tester l’absence des lettres i, I, o et O.
• \S{6,12} permet de définir une longueur minimal de 6 caractères et maximal de 12.
• $/ vous permet d’indiquer la fin de notre chaîne.

Du coup, notre chaîne initiale nous permet de tester la présence : Au moins une lettre dont une majuscule, un chiffre, un caractère parmi ($, @), mais pas i, I, o, O, et entre 6 et 12 caractères (hors espaces).

Vous pouvez bien entendu modifier une Regex à votre guise ; créer une nouvelle expression régulière (si vous avez des connaissances en informatique) ou simplement ajouter ou supprimer les groupes de parenthèses qui correspondent aux caractères que vous (ne) souhaitez (pas) avoir dans votre mot de passe.

Voici d’autres exemples :

• /^0[,.]([1-8]\d|90)$/ : la valeur doit être entre 0,10 ET 0,90.
• /^22[,.]([1-9])$/ : la valeur doit être entre 22,1 ET 22,9.
• /^(1[8-9]|2[0-4])$/ : la valeur doit être entre 18 et 24.
• /^(3([.,]\d{1,2})?|4([.,]0{1,2})?)$/ : la valeur doit être en 3 et 4 avec la prise en compte des décimales.
• Code de nomenclature interne type 2015J02 : /^2015[A-Z]\d{2}$/
• Une suite de 5 chiffres, tous pairs : /^[02468]{5}$/
• Le mot « process » qui doit apparaître absolument à la fin de la saisie : /process$/gi
• Un nombre à une décimale, avec la décimale obligatoire : /^[1-9][0-9]*[,.][0-9]$/
• Un nombre à une décimale, avec la décimale facultative : /^[1-9][0-9]*([,.][0-9])?$/

Étape 2 : Paramétrez votre Champ de Saisie

• Allez dans les options de votre Champ de Saisie, dans l’onglet [Avancé].
• Pour définir le format de votre masque de saisie, complétez la case [Masque de saisie (Expression régulière)] avec votre expression régulière.
• Pour ajouter une aide à propos du masque de saisie, complétez la case [Masque de saisie (Explications pour les mobiles)] avec les indications permettant de comprendre et de respecter le format demandé pour la saisie.
• Pour finir, cliquez sur [Valider] pour enregistrer.

Le texte d’aide se matérialisera par une info-bulle sur l’appareil mobile.

Sur le mobile

La saisie n’est valide que si son format correspond à celui prédéfini par l’expression régulière configurée. Si le format saisi est incorrect, le champ apparaît en rouge. Il rend alors sa saisie correcte obligatoire. Ce dernier affiche le message que nous avions indiqué précédemment dans le champ Masque de saisie (Explication pour les mobiles).

L’utilisateur ne peut enregistrer son formulaire.
Un message indiquant que l’ensemble des champs n’est pas complété apparaît.