Le Coin Web de QuentinC - JavaScript Form Checker : Mode d'emploi complet

Mode d'emploi compet de JavaScript Form Checker

Pour commencer

Avant d'utiliser les commandes de JavaScript Form Checker dans vos pages, vous devez absolument commencer par ajouter le script dans celles-ci, au moyen de l'élément <script>, de n'importe où dans le document (mais le plus tôt sera le mieux), de la manière suivante :

<script type="text/javascript" src="JSFCv0.1.js"></script>

La balise fermante ne peut être omise ni en HTML, ni en XHTML. Une fois le script inclus dans la page, celui-ci se lancera automatiquement au chargement de celle-ci, et lancera une recherche des commandes JSFC.

Poser une contrainte à un champ de formulaire

Vous pouvez ajouter une contrainte à tous les éléments input, select et textarea. Elle se fixe au moyen de l'attribut class, et peut évidemment être combinée avec des appels de classe CSS normales. Par exemple :

<input type="text" name="moninput" class="JSFCMaCommande" />

ou

<input type="text" name="moninput" class="maClasseCSS1 maClasseCSS2 JSFCMaCommande MaClasseCSS3" />

Ainsi, vous pouvez faire précéder ou suivre des instructions CSS normales. Une commande du JavaScript Form Checker ne peut contenir d'espace.

Toutes les commandes du JavaScript Form Checker commencent par le préfixe « JSFC », comme indiqué ci-dessus. IL n'est pour le moment pas possible d'assigner deux commandes à un même champ. La casse n'est jamais prise en compte dans les commandes.

Les commandes JSFC

Voici le plus gros et le plus intéressant morceau du mode d'emploi. C'est ici que la syntaxe et les possibilités des commandes sont expliquées.

La base des commandes JSFC

Comme cela est indiqué toute à l'heure, toute commande JSFC est précédée de son préfixe JSFC. A partir de maintenant, il sera fait abstraction de ce préfixe toujours présent.

La syntaxe générale d'une commande JSFC se compose d'un nom de commande proprement dit, puis d'un ou plusieurs paramètres, parfois optionnels, parfois obligatoires, selon les cas. Le nom de commande et les différents paramètres sont séparés entre eux par un caractère underscore (caractère de soulignement), de la manière suivante :

NomDeCommandeJSFC_Paramètre1_Paramètre2_Paramètre3_..._ParamètreN

A partir de là, vous savez tout ! IL ne reste plus qu'à voir les différentes commandes disponibles et la liste de leurs paramètres. Vous allez voir, c'est extrêment simple en plus !

Saisie de chaînes

La commande string permet de vérifier la saisie d'une chaîne de caractères. Elle peut prendre trois paramètres facultatifs qui peuvent être indiqués dans n'importe quel ordre. Il s'agit des suivants :

• Le format. IL est possible de vérifier plusieurs types généraux de chaînes. Voyez plus loin.
• Une longueur minimum et une longueur maximum. Vous pouvez fixer la taille minimum et maximum de la chaîne à entrer. Si vous n'indiquez qu'une seule valeur, celle-ci sera considérée comme étant la valeur minimale.

Les formats suivants sont supportés :

• all : Il s'agit de la valeur par défaut, aucune restriction n'est faite sur la chaîne à entrer à part éventuellement sa longueur.
• alpha : Chaîne alphabétique. Seuls les lettres de A à Z minuscules et majuscules seront acceptées.
• num : Seuls les chiffres de 0 à 9 seront acceptés. Notez que une chaîne commençant par 0 est autorisée. Pour vérifier un nombre, c'est la commande Number qu'il faut utiliser.
• alphanum : Les lettres de A à Z ainsi que les chiffres de 0 à 9 seront acceptés.
• alphanumext : Les caratères alphanumériques ainsi que le tiret et le soulignement (underscore) seront acceptés.
• nospace : Tous les caractères sauf les espaces, tabulations et retours de ligne seront acceptés.

Voici quelques exemples :

• String_alphanum_3_10 : Une chaîne alphanumérique entre 3 et 10 caractères.
• String_4_num : Une chaîne constituée d'au moins 4 chiffres.
• String_nospace : Une chaîne de longueur quelconque mais ne contenant pas d'espace.
• String_127_10 : Une chaîne quelconque entre 10 et 127 caractères.
• String_14 : Une chaîne quelconque de plus de 14 caractères.

Saisie de nombres

La commande Number permet de vérifier la saisie d'un nombre. Les alias Integer et Float sont également acceptés.

Cette commande peut prendre deux paramètres facultatifs qui indiquent une valeur minimum et une valeur maximum possible. Alors que Number alias Integer permettent de vérifier des nombres entiers, Float vérifie des nombres décimaux. Le séparateur décimal est un point. Si vous n'indiquez qu'un paramètre, il sera considéré comme étant une valeur minimum.

Quelques exemples :

• Number_200_100 : Un nombre entier compris entre 100 et 200 inclus.
• Integer_75 : Un nombre entier supérieur à 75.
• Float_0_1 : Un nombre décimal compris entre 0 et 1 inclus.
• Number : Un nombre entier quelconque

Saisie de mots de passe

La commande Password permet de vérifier un mot de passe. Elle peut prendre deux paramètres facultatifs qui indiquent une longueur minimum et maximum respectivement fixés par défaut à 5 et 20.

La commande PasswordCheck permet de vérifier qu'un champ de mot de passe contient la même valeur qu'un autre champ de mot de passe indiqué par son nom grâce à l'unique paramètre nécessaire (obligatoire cette fois !) à cette commande.

Saisie d'e-mail et d'URL

Les commandes Email et URL permettent respectivement de vérifier la validité d'une adresse e-mail ou URL. Seule la syntaxe de l'adresse est vérifiée. IL est impossible de vérifier si celle-ci existe réellement ou non. Ces deux commandes ne prennent aucun paramètre.

Saisie de date et heure

Les trois commandes Date; Time et DateTime permettent de vérifier la saisie d'une heure, d'une date ou d'une combinaison des deux.

Time peut prendre un paramètre fixe nommé withSeconds qui, s'il est présent, force l'utilisateur à indiquer une heure précise à la seconde alors qu'en temps normal c'est facultatif. Un seul format d'heure est accepté pour le moment : HH:MMHH:MM:SS.

Date et DateTime peuvent prendre trois paramètres facultatifs indiquant d'une part le format de date à utiliser (voir plus loin), une date minimum et une date maximum à indiquer sous forme de valeur numérique (nombre de milisecondes écoulées depuis le 1er janvier 1970 à minuit) ou alors la valeur spéciale now

Pour l'instant, deux formats de date sont supportés : fr, format français, qui équivaut à JJ/MM/AAAA, et us, format américain, qui équivaut à AAAA-MM-JJ.

Pour la commande DateTime, la date et l'heure doivent être séparées d'un simple espace, le format sera donc JJ/MM/AAAA HH:MM ou AAAA-MM-JJ HH:MM selon le format fr ou us choisi pour la date.

Quelques exemples :

• Datetime_us : Une combinaison date et heure quelconque au format américain.
• Date_now : Une date au format français et postérieure à la date actuelle
• Date_1_now_us : Une date au format américain comprise entre le 1er janvier 1970 à minuit (et 1 miliseconde) à aujourd'hui.
• Date : Une date quelconque au format français.
• Time_withseconds : Une heure au format HH:MM:SS
• Time : Une heure au format HH:MM ou HH:MM:SS

Gestion des champs facultatifs

La commande spéciale EmptyOr, combinée à une autre commande normale, permet à l'utilisateur de soit laisser le champ vide, soit le remplir avec les contraintes de validation aplliquées au champ.

Quelques exemples :

• EmptyOrURL : Soit le champ reste vide, ou alors il contient une adresse URL valide.
• EmptyOrDateTime_now : Soit le champ reste vide, ou soit il contient une date/heure valide au format français postérieure à aujourd'hui.

Les messages d'alerte affichés

IL est possible de modifier les messages d'alerte qui sont affichés lorsqu'un champ ne satisfait pas les contraintes fixées. La liste de tous les messages se trouve au début du code source javascript et il vous est aisé d'y apporter votre petite touche personnelle.

Vous êtes ici : Accueil > Programmation JavaScript > JavaScript Form Checker > JavaScript Form Checker : Mode d'emploi complet

Dernière modification de cette page : Mardi 10 juillet 2007 10:50
Haut de page  •  Contact  •  RSS  •  Valide XHTML 1.0