J'ai une formation en programmation C / C ++, et tout en apprenant nonchalamment Javascript via les pages Web @ 3C sur JS, j'ai trouvé ce morceau de code -

<html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>

Eh bien, je ne sais pas si j'ai raté une de leurs leçons précédentes; suis confus sur le "retour" utilisé dans la ligne -

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">

Ma question - Étant donné que le "onsubmit" dans la ligne ci-dessus lors de l'appel de la fonction "validateForm()" recherchera de toute façon une valeur de retour true / false, quelle est la signification de ce mot clé de retour explicite? Je vois que la suppression du mot clé de retour et l'exécution du code ci-dessus (comme - onsubmit = "validateForm();") fonctionnent, mais même si une erreur de saisie est là, le formulaire est finalement soumis après l'affichage du message d'avertissement.

Pourriez-vous s'il vous plaît jeter un peu de lumière sur l'utilisation de ce mot clé "retour" dans ce scénario?

De plus, je trouve qu'il y a beaucoup d'écarts dans la façon dont Javascript est écrit, compte tenu de mes antécédents en c / c ++ .. suis-je seul ici ..? :)

Merci!

2
arun nair 3 oct. 2011 à 11:56

4 réponses

Meilleure réponse

Je pense que tout le monde a presque répondu à la question, mais de différentes manières. Merci les gars.

Il m'est arrivé de lire un excellent article en ligne, qui explique magnifiquement ce qui se passe réellement, principalement dans les coulisses, en utilisant un exemple qui ressemble étroitement à la question que j'avais posée.

A estimé que cela deviendrait utile pour quiconque pourrait être confronté à ce problème à l'avenir.

Lien vers l'article- http://www.quirksmode.org/js/events_early.html Lisez la section "Empêcher le défaut" de la page.

--arun nair

1
arun nair 9 oct. 2011 à 07:50

Le return en HTML n'est pas nécessaire. Pour mémoire, attacher l'événement par programme est à la fois plus beau et plus puissant:

<html>
    <head>
    <script type="text/javascript">

        var myForm = document.getElementById("myForm");

        myForm.onsubmit = function() {
            var x = myForm["email"].value;
            var atpos = x.indexOf("@");
            var dotpos = x.lastIndexOf(".");

            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                alert("Not a valid e-mail address");
                return false;
            }
        };
    </script>
    </head>
    <body>
        <form id="myForm" action="demo_form.asp" method="post">
            <label>
                Email:
                <input type="text" name="email">
            </label>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>
1
Simeon 3 oct. 2011 à 08:10

OK, il semble qu'il y ait des réponses trompeuses, alors je vais essayer de fournir une explication. La notation <element onsubmit="handler_body"> est traduite en quelque chose comme:

element.onsubmit = function (event) {
    with (document) {
        with (this) {
            handler_body
        }
    }
};

(Nous ignorerons les choses liées à with, ce n'est pas important ici.) Maintenant, considérons que la fonction validateForm() renvoie false. Si vous utilisez onsubmit="return validateForm()", ce qui par la suite se transforme évidemment en onsubmit="return false", votre gestionnaire deviendra

element.onsubmit = function () {
    return false;
};

Lorsque l'événement submit est déclenché (c'est comme si le navigateur appelle en interne element.onsubmit()), element.onsubmit() renvoie false et donc la valeur par défaut est supprimée.

Cependant, si vous utilisiez simplement onsubmit="validateForm();", le gestionnaire d'événements ressemblerait à

element.onsubmit = function () {
    false;
};

Dans ce cas, false n'est qu'une déclaration. element.onsubmit() ne renvoie rien, et le retour undefined du gestionnaire d'événements ne suffit pas pour empêcher le comportement par défaut.

@Simeon a dit que "Le retour en HTML n'est pas nécessaire." , mais il utilise également return false dans son code.

3
duri 3 oct. 2011 à 09:07

Bien si la fonction retourne false, alors l'événement est annulé.

onsubmit="return validateForm();"

Est quelque peu équivalent à

onsubmit="if(!validateForm()) stop the event"

Bien sûr, il existe d'autres méthodes (plus propres) pour arrêter la propagation dom de l'événement:

function stopEvent(event){
    if(event.preventDefault)
         event.preventDefault();
    if(event.stopPropagation)
         event.stopPropagation();
    event.cancelBubble = true;
}

Puis l'utiliser dans un gestionnaire d'événements:

onsubmit = function(e){
    if(!validateForm())
        stopEvent(e);
}
3
gion_13 3 oct. 2011 à 08:05
7632383