form submission and blocking-HTML Tutorial-php.cn

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

Copy after login

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

Copy after login

Event return value:

The return value of the event will affect the default action of the event.

If the return value of the event is false, then prevents the default action from being executed.

If the event return value is ture or empty , the default action is executed.

If the event does not have any return value , the default action is executed.

There are two affected events: onclick, onsubmit

The return values of other events will not affect the default action.

The return value of onclick will also organize the submission of submit.