probleme verification format adresse mail dans formulalaire

par **moogli** » 25 août 2013, 21:21

Salut,

javascript n'est pas java il ne faut confondre !

Donc en Javascript

http://www.commentcamarche.net/contents ... jet-regexp
Ou
http://www.siteduzero.com/informatique/ ... lieres-1-2 pour les expreg

@+

par **benv8nam** » 24 août 2013, 18:40

Tu trouveras sur internet plein d'expression régulière permettant de vérifier la validité d'une adresse mail.

En HTML il existe le type mail ainsi les utilisateurs ne pourront rentrer que des textes de type mail bien sur ceci n'est pas sécurisant coté serveur.

par **tomtom59** » 24 août 2013, 12:14

Bonjour je travaille sur un formulaire en java , j'ai juste un dernier probleme , c'est pour verifier si l'adresse mail a un format correct
Voici mon code en entier , en rouge la partie concerné :

Code : Tout sélectionner

<!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>Document sans titre</title>
<style>
      body {
       padding-top: 50px;
      }

      .form_col {
        display: inline-block;
        margin-right: 15px;
        padding: 3px 0px;
        width: 200px;
        min-height: 1px;
        text-align: right;
      }

      input {
        padding: 2px;
        border: 1px solid #CCC;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
      }

      input:focus {
        border-color: rgba(82, 168, 236, 0.75);
        -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
      }

      .correct {
        border-color: rgba(68, 191, 68, 0.75);
      }

      .correct:focus {
        border-color: rgba(68, 191, 68, 0.75);
        -moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
        -webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
        box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
      }

      .incorrect {
        border-color: rgba(191, 68, 68, 0.75);
      }

      .incorrect:focus {
        border-color: rgba(191, 68, 68, 0.75);
        -moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
        -webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
        box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
      }

      .tooltip {
        display: inline-block;
        margin-left: 20px;
        padding: 2px 4px;
        border: 1px solid #555;
        background-color: #CCC;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
      }
    </style>
</head>

<body>
<form id="myForm">

      

      <label class="form_col" for="lastName">Nom :</label>
      <input name="lastName" id="lastName" type="text" />
      <span class="tooltip">Un nom ne peut pas faire moins de 2 caractères</span>
      <br /><br />

      <label class="form_col" for="firstName">Prénom :</label>
      <input name="firstName" id="firstName" type="text" />

      <span class="tooltip">Un prénom ne peut pas faire moins de 2 caractères</span>
      <br /><br />

     

      <label class="form_col" for="entreprise">Entreprise :</label>
      <input name="entreprise" id="entreprise" type="text" />
      <span class="tooltip">Une entreprise ne peut pas faire moins de 2 caractères</span>
      <br /><br />
      
      <label class="form_col" for="adresse">Adresse :</label>
      <input name="adresse" id="adresse" type="text" />
      <span class="tooltip">Une adresse ne peut pas faire moins de 5 caractères</span>
      <br /><br />
      
      <label class="form_col" for="CP">Code Postal :</label>
      <input name="CP" id="CP" type="text" />
      <span class="tooltip">Un code postal ne peut pas faire moins de 2 caractères</span>
      <br /><br />
      
      <label class="form_col" for="ville">Ville :</label>
      <input name="ville" id="ville" type="text" />
      <span class="tooltip">Une ville ne peut pas faire moins de 2 caractères</span>
      <br /><br />
      
      <label class="form_col" for="ntel1">N° de téléphone 1 :</label>
      <input name="ntel1" id="ntel1" type="text" />
      <span class="tooltip">Un n° de téléphone doit comporter 10 chiffres</span>
      <br /><br />
      
      <label class="form_col" for="ntel2">N° de téléphone 2 :</label>
      <input name="ntel2" id="ntel2" type="text" />
      <span class="tooltip">Un n° de téléphone doit comporter 10 chiffres</span>
      <br /><br />
      
      <label class="form_col" for="fax">Fax :</label>
      <input name="fax" id="fax" type="text" />
      <span class="tooltip">Un n° de fax doit comporter 10 chiffres</span>
      <br /><br />
      
      <label class="form_col" for="site">Site web :</label>
      <input name="site" id="site" type="text" />
      <span class="tooltip">Un site web ne peut pas faire moins de 4 caractères</span>
      <br /><br />
      
      <label class="form_col" for="mail">Mail :</label>
      <input name="mail" id="mail" type="text" />
      <span class="tooltip">Format d'adresse mail non valide</span>
      <br /><br />





      <label class="form_col" for="pwd1">Mot de passe :</label>
      <input name="pwd1" id="pwd1" type="password" />
      <span class="tooltip">Le mot de passe ne doit pas faire moins de 6 caractères</span>

      <br /><br />

      <label class="form_col" for="pwd2">Mot de passe (confirmation) :</label>
      <input name="pwd2" id="pwd2" type="password" />
      <span class="tooltip">Le mot de passe de confirmation doit être identique à celui d'origine</span>
      <br /><br />

      

      

      <span class="form_col"></span>
      <input type="submit" value="M'inscrire" /> <input type="reset" value="Réinitialiser le formulaire" />

    </form>


    <script>

        // Fonction de désactivation de l'affichage des "tooltips"
        
        function deactivateTooltips() {
        
            var spans = document.getElementsByTagName('span'),
            spansLength = spans.length;
            
            for (var i = 0 ; i < spansLength ; i++) {
                if (spans[i].className == 'tooltip') {
                    spans[i].style.display = 'none';
                }
            }
        
        }


        // La fonction ci-dessous permet de récupérer la "tooltip" qui correspond à notre input

        function getTooltip(elements) {
        
            while (elements = elements.nextSibling) {
                if (elements.className === 'tooltip') {
                    return elements;
                }
            }
            
            return false;
        
        }


        // Fonctions de vérification du formulaire, elles renvoient "true" si tout est ok

        var check = {}; // On met toutes nos fonctions dans un objet littéral

        

        check['lastName'] = function(id) {

            var name = document.getElementById(id),
                tooltipStyle = getTooltip(name).style;

            if (name.value.length >= 2) {
                name.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                name.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };

        check['firstName'] = check['lastName']; // La fonction pour le prénom est la même que celle du nom

        

        check['entreprise'] = function() {
        
            var entreprise = document.getElementById('entreprise'),
                tooltipStyle = getTooltip(entreprise).style;
            
            if (entreprise.value.length >= 2) {
                entreprise.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                entreprise.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['adresse'] = function() {
        
            var adresse = document.getElementById('adresse'),
                tooltipStyle = getTooltip(adresse).style;
            
            if (adresse.value.length >= 2) {
                adresse.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                adresse.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['CP'] = function() {
        
            var CP = document.getElementById('CP'),
                tooltipStyle = getTooltip(CP).style;
				
            
            if (CP.value.length == 5) {
                CP.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                CP.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['ville'] = function() {
        
            var ville = document.getElementById('ville'),
                tooltipStyle = getTooltip(ville).style;
            
            if (ville.value.length >= 2) {
                ville.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                ville.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['ntel1'] = function() {
        
            var ntel1 = document.getElementById('ntel1'),
                tooltipStyle = getTooltip(ntel1).style;
            
            if (ntel1.value.length >= 2) {
                ntel1.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                ntel1.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['ntel2'] = function() {
        
            var ntel2 = document.getElementById('ntel2'),
                tooltipStyle = getTooltip(ntel2).style;
            
            if (ntel2.value.length == 10) {
                ntel2.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                ntel2.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['fax'] = function() {
        
            var fax = document.getElementById('fax'),
                tooltipStyle = getTooltip(fax).style;
            
            if (fax.value.length == 10) {
                fax.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                fax.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
		check['site'] = function() {
        
            var site = document.getElementById('site'),
                tooltipStyle = getTooltip(site).style;
            
            if (site.value.length >= 4) {
                site.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                site.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        };
		
	[color=#FF0040]	check['mail'] = function() {
        
            var mail = document.getElementById('mail'),
                tooltipStyle = getTooltip(mail).style;
            
            if (mail.value.length >= 4) {
                mail.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                mail.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }

        }[/color]

        check['pwd1'] = function() {
        
            var pwd1 = document.getElementById('pwd1'),
                tooltipStyle = getTooltip(pwd1).style;
            
            if (pwd1.value.length >= 6) {
                pwd1.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                pwd1.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }
        
        };

        check['pwd2'] = function() {
        
            var pwd1 = document.getElementById('pwd1'),
                pwd2 = document.getElementById('pwd2'),
                tooltipStyle = getTooltip(pwd2).style;
            
            if (pwd1.value == pwd2.value && pwd2.value != '') {
                pwd2.className = 'correct';
                tooltipStyle.display = 'none';
                return true;
            } else {
                pwd2.className = 'incorrect';
                tooltipStyle.display = 'inline-block';
                return false;
            }
        
        };

        

        // Mise en place des événements
        
        (function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
        
            var myForm = document.getElementById('myForm'),
                inputs = document.getElementsByTagName('input'),
                inputsLength = inputs.length;
        
            for (var i = 0 ; i < inputsLength ; i++) {
                if (inputs[i].type == 'text' || inputs[i].type == 'password') {
        
                    inputs[i].onkeyup = function() {
                        check[this.id](this.id); // "this" représente l'input actuellement modifié
                    };
        
                }
            }
        
            myForm.onsubmit = function() {
        
                var result = true;
        
                for (var i in check) {
                    result = check[i](i) && result;
                }
        
                if (result) {
                    alert('Le formulaire est bien rempli.');
                }
        
                return false;
        
            };
        
            myForm.onreset = function() {
        
                for (var i = 0 ; i < inputsLength ; i++) {
                    if (inputs[i].type == 'text' || inputs[i].type == 'password') {
                        inputs[i].className = '';
                    }
                }
        
                deactivateTooltips();
        
            };
        
        })();


        // Maintenant que tout est initialisé, on peut désactiver les "tooltips"
        
        deactivateTooltips();

    </script>


</body>
</html>

probleme verification format adresse mail dans formulalaire

Répondre

Étendre la vue Revue du sujet : probleme verification format adresse mail dans formulalaire

Re: probleme verification format adresse mail dans formulala

Re: probleme verification format adresse mail dans formulala

probleme verification format adresse mail dans formulalaire