양식 제출 및 차단

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

이벤트 반환 값:

이벤트의 반환 값은 이벤트의 기본 동작에 영향을 미칩니다.

이벤트의 반환 값이 false인 경우 는 기본 작업이 실행되지 않도록 합니다.

이벤트 반환 값이 true 또는 비어 있음인 경우 기본 작업이 실행됩니다.

이벤트에 반환 값이 없으면 기본 작업이 실행됩니다.

영향을 받는 두 가지 이벤트가 있습니다: onclick, onsubmit

다른 이벤트의 반환 값은 기본 동작에 영향을 미치지 않습니다.

onclick의 반환 값은 submit 제출도 정리합니다.