2

本人有C/C++编程背景，在通过@3C网页上JS随便学习Javascript的时候，发现了这段代码——

<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()”无论如何都会寻找真/假的返回值，这个显式返回关键字的意义是什么？我看到删除 return 关键字并运行上面的代码（as - onsubmit = "validateForm();"）可以工作，但即使输入中有错误，表单最终也会在显示警告消息后提交。

您能否对在这种情况下使用此“return”关键字有所了解？

此外，考虑到我在 c/c++ 方面的背景，我发现 Javascript 的编写方式有很多偏差。我一个人在这里吗？:)

谢谢！

4

4 回答 4

3

好吧，如果函数返回 false，则事件被取消。 

onsubmit="return validateForm();"

有点等价于

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

当然，还有其他（更清洁的）方法可以停止事件 dom-propagation ： 

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

然后将其用于事件处理程序：

onsubmit = function(e){
    if(!validateForm())
        stopEvent(e);
}
于 2011-10-03T08:00:03.277 回答
3

好的，似乎出现了一些误导性的答案，所以我将尝试提供解释。该符号<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从事件处理程序返回不足以阻止默认行为。

@Simeon 告诉“不需要 HTML 中的返回”。，但他实际上也在return false他的代码中使用。

于 2011-10-03T09:07:26.890 回答
1

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>
于 2011-10-03T08:10:54.377 回答
1

我相信每个人都几乎回答了这个问题，但方式不同。多谢你们。

我碰巧在网上阅读了一篇很棒的文章，它很好地解释了实际发生的事情，主要是在幕后，使用的例子与我发布的问题非常相似。

觉得这对将来可能面临这个问题的任何人都有用。

链接到文章 -http://www.quirksmode.org/js/events_early.html 阅读页面的“防止默认”部分。

——阿伦奈尔

于 2011-10-09T07:50:05.047 回答