Scribd Logo
Hochladen

Willkommen bei Scribd!

  • TP 1

    Hochgeladen von

    Adile Med
    23 Ansichten3 Seiten

    Originaltitel

    TP_1

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    23 Ansichten3 Seiten

    TP 1

    Hochgeladen von

    Adile Med

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 3

    TP n 1 : Javascript

    But TP
    Nous allons voir comment vrifier les champs d'un formulaire, afficher une alerte et colorer les champs qui sont vide ou qui ne correspondent pas nos attentes pour amliorer la lisibilit pour l'utilisateur. De plus nous souhaitons remettre nos champs la couleur initiale lorsque l'utilisateur commence remplir les champs vides aprs l'alerte.

    Le dtail de nos besoins


    Nous avons donc besoin : 1. d'un formulaire. 2. d'une fonction qui va rtablir la couleur initiale des champs vrifis lorsque l'utilisateur va saisir un lment. (cette fonction sera donc appel par chacun des champs). Nous la nommerons function couleur(obj). 3. d'une fonction qui va vrifier les champs du formulaire et colorer les champs non conformes nos souhaits. (cette fonction sera donc appel par le formulaire). Nous la nommerons function check().

    Notre formulaire
    Nous allons crer un formulaire avec 3 champs, nom, prenom et mail.
    <html> <head> <title>Test de vrification de formulaire</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <!-Nous appelons donc notre future fonction la soumission du formulaire qui va je le rapelle vrifier nos champs --> <form action="page.html" method="post" enctype="application/x-www-form-urlencoded" name="formulaire" onSubmit="return check();"> <!-sur chaqu'un des champs nous appelons la fonction qui va rtablir la couleur initiale --> Nom : <input name="nom" type="text" onKeyUp="javascript:couleur(this);"><br> Prenom : <input name="prenom" type="text" onKeyUp="javascript:couleur(this);"><br> Mail : <input name="mail" type="text" onKeyUp="javascript:couleur(this);" ><br> <input type="submit" name="Submit" value="Envoyer"> </form> </body> </html>

    Master TR 2010-2011

    Nos fonctions
    Nous allons crer la fonction qui rtablie la couleur des champs et appeler l'action onKeyUp par chaque champs.
    //nous appliquons simplement une couleur d'arrire plan aux objets traits, function couleur(obj) { obj.style.backgroundColor = "#FFFFFF"; }

    Nous allons crer maintenant notre fonction qui va vrifier les champs et qui va retourner une alerte dans les cas o les champs nom et prenom sont vide et le champs mail vide ou douteux. Notre vrification va porter sur le . et @
    function check() { var msg = ""; //Vrification du mail s'il n'est pas vide on vrifie le . et @ if (document.formulaire.mail.value != "") { indexAroba = document.formulaire.mail.value.indexOf('@'); indexPoint = document.formulaire.mail.value.indexOf('.'); if ((indexAroba < 0) || (indexPoint < 0)) { //dans le cas ou il manque soit le . soit l'@ on modifie la couleur d'arrire plan du champ mail et dfinissons un message d'alerte document.formulaire.mail.style.backgroundColor = "#F3C200"; msg += "Le mail est incorrect\n"; } } //Notre champs mail est vide donc on change la couleur et on dfini un autre message d'alerte else { document.formulaire.mail.style.backgroundColor = "#F3C200"; msg += "Veuillez saisir votre mail.\n";

    } //ici nous vrifions si le champs nom et vide, changeons la couleur du champs et dfinissons un message d'alerte if (document.formulaire.nom.value == "") { msg += "Veuillez saisir votre nom\n"; document.formulaire.nom.style.backgroundColor = "#F3C200"; } //meme manipulation pour le champ prnom if (document.formulaire.prenom.value == "") { msg += "Veuillez saisir votre prenom\n"; document.formulaire.prenom.style.backgroundColor = "#F3C200"; } //Si aucun message d'alerte a t initialis on retourne TRUE if (msg == "") return(true); //Si un message d'alerte a t initialis on lance l'alerte else {

    Master TR 2010-2011

    alert(msg); return(false); } }

    Voici donc nos deux fonctions cres que nous allons insrer dans le head de notre page de cette faon :
    <script language="JavaScript"> <!-function couleur(obj) { obj.style.backgroundColor = "#FFFFFF"; } function check() { var msg = ""; if (document.formulaire.mail.value != "") { indexAroba = document.formulaire.mail.value.indexOf('@'); indexPoint = document.formulaire.mail.value.indexOf('.'); if ((indexAroba < 0) || (indexPoint < 0)) { document.formulaire.mail.style.backgroundColor = "#F3C200"; msg += "Le mail est incorrect\n"; } } else { document.formulaire.mail.style.backgroundColor = "#F3C200"; msg += "Veuillez saisir votre mail.\n";

    } if (document.formulaire.nom.value == "") { msg += "Veuillez saisir votre nom\n"; document.formulaire.nom.style.backgroundColor = "#F3C200"; } if (document.formulaire.prenom.value == "") { msg += "Veuillez saisir votre prenom\n"; document.formulaire.prenom.style.backgroundColor = "#F3C200"; } if (msg == "") return(true); else { alert(msg); return(false); } } //--> </script>

    Master TR 2010-2011

    Das könnte Ihnen auch gefallen