Formularübermittlung und Sperrung

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span> new document <span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html;charset=UTF-8"</span> <span style="color: #0000ff">/></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></span>
    <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">实例：submit按钮，结合onsubmit事件，验证和提交表单</span>
    <span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000"> checkForm(){
        </span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">判断用户名和密码是否为空</span>
        <span style="background-color: #f5f5f5; color: #0000ff">if</span><span style="background-color: #f5f5f5; color: #000000">(document.form1.username.value</span><span style="background-color: #f5f5f5; color: #000000">==</span><span style="background-color: #f5f5f5; color: #000000">""</span><span style="background-color: #f5f5f5; color: #000000">){
                window.alert(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">用户名不能为空</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
                </span><span style="background-color: #f5f5f5; color: #0000ff">return</span> <span style="background-color: #f5f5f5; color: #0000ff">false</span><span style="background-color: #f5f5f5; color: #000000">;
        }</span><span style="background-color: #f5f5f5; color: #0000ff">else</span> <span style="background-color: #f5f5f5; color: #0000ff">if</span><span style="background-color: #f5f5f5; color: #000000">(document.form1.username.value.length</span><span style="background-color: #f5f5f5; color: #000000"><</span><span style="background-color: #f5f5f5; color: #000000">5</span> <span style="background-color: #f5f5f5; color: #000000">||</span><span style="background-color: #f5f5f5; color: #000000"> document.form1.username.value.length</span><span style="background-color: #f5f5f5; color: #000000">></span><span style="background-color: #f5f5f5; color: #000000">20</span><span style="background-color: #f5f5f5; color: #000000">){
                window.alert(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">用户名在5-20位</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
                </span><span style="background-color: #f5f5f5; color: #0000ff">return</span> <span style="background-color: #f5f5f5; color: #0000ff">false</span><span style="background-color: #f5f5f5; color: #000000">;
        }</span><span style="background-color: #f5f5f5; color: #0000ff">else</span> <span style="background-color: #f5f5f5; color: #0000ff">if</span><span style="background-color: #f5f5f5; color: #000000">(document.form1.userpwd.value</span><span style="background-color: #f5f5f5; color: #000000">==</span><span style="background-color: #f5f5f5; color: #000000">""</span><span style="background-color: #f5f5f5; color: #000000">){
                window.alert(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">密码不能为空</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
                </span><span style="background-color: #f5f5f5; color: #0000ff">return</span> <span style="background-color: #f5f5f5; color: #0000ff">false</span><span style="background-color: #f5f5f5; color: #000000">;
        }</span><span style="background-color: #f5f5f5; color: #0000ff">else</span> <span style="background-color: #f5f5f5; color: #0000ff">if</span><span style="background-color: #f5f5f5; color: #000000">(document.form1.userpwd.value.length</span><span style="background-color: #f5f5f5; color: #000000"><</span><span style="background-color: #f5f5f5; color: #000000">5</span> <span style="background-color: #f5f5f5; color: #000000">||</span><span style="background-color: #f5f5f5; color: #000000"> document.form1.userpwd.value.length</span><span style="background-color: #f5f5f5; color: #000000">></span><span style="background-color: #f5f5f5; color: #000000">20</span><span style="background-color: #f5f5f5; color: #000000">){
                window.alert(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">密码必须在5-20位</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
                </span><span style="background-color: #f5f5f5; color: #0000ff">return</span> <span style="background-color: #f5f5f5; color: #0000ff">false</span><span style="background-color: #f5f5f5; color: #000000">;
        }
    }
  </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

 <span style="color: #0000ff"><</span><span style="color: #800000">form </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="form1"</span><span style="color: #ff0000"> method</span><span style="color: #0000ff">="get"</span><span style="color: #ff0000"> action</span><span style="color: #0000ff">="login.php"</span><span style="color: #ff0000">    onsubmit</span><span style="color: #0000ff">="return checkForm()"</span><span style="color: #0000ff">></span><span style="color: #000000">
     用户名：</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="username"</span> <span style="color: #0000ff">/></span><span style="color: #000000">
     密码：</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="password"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="userpwd"</span> <span style="color: #0000ff">/></span>
     <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="submit"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="提交表单"</span> <span style="color: #0000ff">/></span>
<span style="color: #0000ff"></</span><span style="color: #800000">form</span><span style="color: #0000ff">></span><span style="color: #000000">
 //单机以下的链接，不会跳转网址，因为默认动作被阻止了
 </span><span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.itcast.cn"</span><span style="color: #ff0000"> onclick</span><span style="color: #0000ff">="return false"</span><span style="color: #0000ff">></span>北京交通网<span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">><br><br></span>

<span style="color: #ff0000">onsubmit<span style="color: #0000ff">="return checkForm()" 加return是事件返回事件，当返回值为false的时候会阻止表单提交。</span></span>

Ereignisrückgabewert:

Der Rückgabewert des Ereignisses wirkt sich auf die Standardaktion des Ereignisses aus.

Wenn der Rückgabewert des Ereignisses false ist, dann verhindert , dass die Standardaktion ausgeführt wird.

Wenn der Ereignisrückgabewert wahr oder leer ist, wird die Standardaktion ausgeführt.

Wenn das Ereignis keinen Rückgabewert hat, wird die Standardaktion ausgeführt.

Es sind zwei Ereignisse betroffen: onclick, onsubmit

Die Rückgabewerte anderer Ereignisse haben keinen Einfluss auf die Standardaktion.

Der Rückgabewert von onclick organisiert auch die Übermittlung von Submits.