validation formulaire javascript | Exam-Lib
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

validation formulaire javascript

abdelouafiJan 13, 2018

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      632
      Likes Received:
      13
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      on va voir la validation du formulaire en javascript:

      1- créer d'abord le formulaire suivant:
      upload_2018-1-13_10-23-39.png

      2- Créer un fonction en javascript pour vérifier la saisie du login?

      3- Créer un fonction en javascript pour vérifier la saisie de l'E-mail?

      4- Créer un fonction en javascript pour vérifier la saisie de l'âge?

      5- Créer un fonction global en javascript pour faire une vérification globale la saisie de tous les champs?


      6- Proposez une deuxième méthode pour répondre aux 5 derniers exercices??


      7- Sans utiliser Javascript, vérifier la saisie de tous les champs?
       
      Last edited: Jan 13, 2018
      Jan 13, 2018
      #1
      Related Threads
      Loading...

    2. Merci d'aimer notre facebook page

      Exam-lib.COM: Exercices Corrigés Langages de Programmation POO
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validation d'un formulaire :</title>
<script>


function souligner(champ, erreur)
{
    if(erreur)
        champ.style.background="#fba";
    else
            champ.style.background="";
}

// fonction qui vérifie le login saisie

function veriflogin(par1)
{
    if(par1.value.length<2 || par1.value.length>30)
    {
        souligner(par1,true);
     
        par1.value="login court ou plus long";
        return false;
    }
    else
    {
        souligner(par1,false);
        return true; 
    }
}


//fonction qui vérifié l'age

function verifage(par)
{
    var x=parseInt(par.value);
    if(x<=0 || x>150)
        {
            souligner(par, true);
            par.value="age incorrect";
            return false;
        }
    else
        {
            souligner(par, false);
            return true;
        }
     
}


//fonction qui vérifie l'email
function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      souligner(champ, true);
      return false;

   }
   else
   {
      souligner(champ, false);
      return true;
   }
}

// Vérifier le formulaire avant l'envoie


function verifForm(par)
{
    var loginok= veriflogin(par.logi);
    var emailok=verifMail(par.email);
    var ageok=verifage(par.a1);
 
    if(loginok && emailok && ageok)
        {return true;}
     
    else
    {
     
        alert("erreur");
        return false;
     
    }
}

</script>


</head>

<body>


  <form action="" onsubmit="return verifForm(this)">
  <p>
    Login : <input type="text" name="login"  onblur="veriflogin(this)" /><br /><br />
    E-mail : <input type="text" name="email"  size="30" onblur="verifMail(this)" /><br /><br />
    Âge : <input type="text" name="age"  size="2" onblur="verifage(this)" /> ans<br /><br />
    <input type="submit" value="Valider" />
  </p>
</form>

</body>
</html>



      Méthode 2:

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validation d'un formulaire :</title>
<script>

function verifForm()
{
    var x=document.f1.login.value;
    if(x=="")
    {
        f1.login.style.background="#fa0";
        f1.login.value="login obligatoire"
        return false;
    }
  
  
  
    //vérifie l'age
  
    var a=document.f1.age.value;
    if(a=="")
    {
        f1.age.style.background="#fa0";
        f1.age.value="age obligatoire"
        return false;
    }
  
    //vérifie l'email
  
    var em=document.f1.email.value;

  
    var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(f1.email.value))
   {
      f1.email.style.background="#fa0";
        f1.email.value="email obligatoire"
      return false;

   }

       if(em=="")
    {
        f1.email.style.background="#fa0";
        f1.email.value="email obligatoire"
        return false;
    }
  
  
  
}

</script>


</head>

<body>


  <form name="f1" action="" onsubmit="return verifForm()">
  <p>
    Login : <input type="text" name="login" /><br /><br />
    E-mail : <input type="text" name="email"  size="30"  /><br /><br />
    Âge : <input type="text" name="age"  size="10"/> ans<br /><br />
    <input type="submit" value="Valider" />
  </p>
</form>

</body>
</html>


      7-
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form action="" method="post">
  Login: <input type="text" name="nom" required><br /><br />
  E-mail:<input type="text" name="email" required><br /><br />
  Age:<input type="text" name="age" required><br /><br />
 
  <input type="submit" value="Submit">
</form>
</body>
</html>
Tags:

Share This Page

Share
Share