2

私には C/C++ プログラミングのバックグラウンドがあり、JS の @3C Web ページで 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()" は、とにかく true/false の戻り値を探しているため、この明示的な return キーワードの意味は何ですか? return キーワードを削除し、上記のコードを (as - としてonsubmit = "validateForm();") 実行すると動作することがわかりますが、入力にエラーがあっても、警告メッセージを表示した後に最終的にフォームが送信されます。

このシナリオでのこの「return」キーワードの使用に光を当てていただけますか?

また、私の c/c++ のバックグラウンドを考慮すると、Javascript の記述方法には多くの逸脱があることがわかります。:)

ありがとう！

4

4 に答える 4

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 に答える
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;
}

そしてそれを event-handler に使用します:

onsubmit = function(e){
    if(!validateForm())
        stopEvent(e);
}
于 2011-10-03T08:00:03.277 に答える
1

returnin 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 ページの「Prevent Default」セクションをお読みください。

--アルン・ナイア

于 2011-10-09T07:50:05.047 に答える