form表单提交和阻止-html教程-PHP中文网

<span style="color: #0000ff"><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 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 style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><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 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 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 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 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 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 style="color: #800000">body</span><span style="color: #0000ff">></span>

 <span style="color: #0000ff"><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 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 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 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 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></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

登录后复制

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

登录后复制

事件返回值：

事件的返回值，会影响事件的默认动作。

如果事件的返回值为false，则阻止默认动作执行。

如果事件返回值为ture或空，则默认动作执行。

如果事件没有任何返回值，则默认动作执行。

受影响的事件有两个：onclick、onsubmit

其他事件的返回值，不会影响默认动作。

onclick的返回值也会组织submit的提交。