зачем нужно явное ключевое слово return при использовании onsubmit в форме с использованием Javascript? - PullRequest
Новая
       20

зачем нужно явное ключевое слово return при использовании onsubmit в форме с использованием Javascript?

2 голосов
/ 03 октября 2011

У меня есть опыт программирования на C / C ++, и, случайно изучая Javascript через веб-страницы @ 3C на JS, я нашел этот фрагмент кода - 

<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>

Ну, я не знаю, имею ли япропустил любой из своих предыдущих уроков;я сбит с толку из-за "возврата", используемого в строке - 

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

Мой вопрос - поскольку "onsubmit" в приведенной выше строке при вызове функции "validateForm()" в любом случае будет искатьвозвращаемое значение true / false, каково значение этого явного ключевого слова return?Я вижу, что при удалении ключевого слова return и выполнении приведенного выше кода (как - onsubmit = "validateForm();") работает, но даже если есть ошибка ввода, форма в конечном итоге отправляется после отображения предупреждающего сообщения.

CouldНе могли бы вы пролить свет на использование этого ключевого слова return в этом сценарии?

Кроме того, я нахожу, что в написании Javascript есть много отклонений, учитывая мое прошлое в c / c ++ ... я здесь один ...?:)

спасибо!

Ответы [ 4 ]

3 голосов
/ 03 октября 2011

ОК, похоже, что некоторые вводящие в заблуждение ответы, поэтому я попытаюсь дать объяснение. Обозначение <element onsubmit="handler_body"> переводится в нечто вроде: 

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

(Мы проигнорируем материал, связанный с with, здесь это не важно.) Теперь рассмотрим функцию validateForm(), возвращающую false. Если вы используете onsubmit="return validateForm()", что впоследствии превращается, очевидно, в onsubmit="return false", ваш обработчик станет 

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

Когда срабатывает событие submit (это похоже на внутренний вызов браузера element.onsubmit()), element.onsubmit() возвращает false и, таким образом, значение по умолчанию подавляется.

Однако, если вы просто используете onsubmit="validateForm();", обработчик событий будет выглядеть как 

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

В этом случае false - это просто утверждение. element.onsubmit() ничего не возвращает, а возврата undefined из обработчика событий недостаточно для предотвращения поведения по умолчанию.

@ Симеон сказал, что «Возвращение в HTML не нужно». , но на самом деле он также использует return false в своем коде.

3 голосов
/ 03 октября 2011

хорошо, если функция возвращает false, то событие отменяется. 

onsubmit="return validateForm();"

несколько эквивалентно 

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

Конечно, существуют и другие (более чистые) методы остановки распространения события: 

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

и затем использовать его в обработчике событий: 

onsubmit = function(e){
    if(!validateForm())
        stopEvent(e);
}
1 голос
/ 09 октября 2011

Я думаю, что все почти ответили на вопрос, но потом по-разному. Спасибо, ребята.

Мне довелось прочитать отличную статью в Интернете, которая прекрасно объясняет, что на самом деле происходит, в основном за кулисами, используя пример, очень похожий на вопрос, который я опубликовал.

Считал, что это станет полезным для тех, кто может столкнуться с этой проблемой в будущем.

Ссылка на статью - http://www.quirksmode.org/js/events_early.html Прочитайте раздел «Предотвращение по умолчанию» на странице.

- Арун Наир

1 голос
/ 03 октября 2011

return в HTML не требуется.Для записи, чтобы прикрепить событие программно и более красиво и мощно: 

<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>
...