02/12/2024

Développement Web

Vérifier si une valeur est un nombre

I. Présentation

Ce tutoriel a pour but de vous faire découvrir la fonction booléenne isNaN qui retourne True (vrai) lorsque la valeur n'est pas un nombre et qui retourne False (faux) lorsque la valeur en est un. Le nombre peut être entier ou décimal.

II. Procédure

Pour vérifier le fonctionnement de cette fonction, réalisons un exemple.

Dans cet exemple, il nous faut une page HTML qui devra contenir un champ de saisie où l'utilisateur devra saisir son poids, qui bien sûr devra être un nombre. La page contiendra également un bouton permettant d'envoyer les informations.

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
  <FORM Name='Formulaire1'>
    Votre poids <input type='text' Name='Poids' Value=''> kg
    <input type='button' Name='Envoyer' Value='Envoyer'>
  </FORM>
 </BODY>
</HTML>

Nous avons maintenant une page HTML avec un champ de saisie et un bouton. Ajoutons maintenant du JavaScript pour contrôler l'information avant d'envoyer le formulaire.

Dans un premier temps, ajoutons une fonction JavaScript permettant de vérifier que le champ de saisie n'est pas vide. S'il est vide la fonction retournera un message d'alerte, sinon le formulaire sera envoyé. Complétez votre code avec le code ci-dessous.

<HTML>
 <HEAD>
    <script language='Javascript'>
    function VerifierFormulaire()
    {
        if ((Formulaire1.Poids.value) == '')
        {
            alert('Vous devez saisir votre poids !') ;
        }   
        else {
            Formulaire1.submit() ;
        }
    }
    </script>
 </HEAD>
 <BODY>
  <FORM Name='Formulaire1'>
    Votre poids <input type='text' Name='Poids' Value=''> kg
    <input type='button' Name='Envoyer' Value='Envoyer' onClick='VerifierFormulaire()'>
  </FORM>
 </BODY>
</HTML>

Maintenant que, grâce au Javascript, nous pouvons déterminer si le formulaire est remplis ou non, il faut rendre la vérification plus pointilleuse et regarder si l’information saisie est bien un nombre. Le code en rouge est celui à ajouter au précédent.

<HTML>
 <HEAD>
    <script language='Javascript'>
    function VerifierFormulaire()
    {
        if ((Formulaire1.Poids.value) == '')
        {
            alert('Vous devez saisir votre poids !') ;
        }   
        else if (isNaN(Formulaire1.Poids.value) == false) {
            Formulaire1.submit() ;
        }
        else if (isNaN(Formulaire1.Poids.value) == true) {
            alert('Poids incohérent') ;
        }
    }
    </script>
 </HEAD>
 <BODY>
  <FORM Name='Formulaire1'>
    Votre poids <input type='text' Name='Poids' Value=''> kg
    <input type='button' Name='Envoyer' Value='Envoyer' onClick='VerifierFormulaire()'>
  </FORM>
 </BODY>
</HTML>

Notre exemple est terminé, vous êtes maintenant capable d'utiliser la fonction isNaN, qui est simple d'utilisation mais efficace.

author avatar
Florian BURNEL Co-founder of IT-Connect
Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.
Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Envoyer par mail

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.