动漫城捕鱼机有什么小技巧吗

書名： JavaScript典型應(yīng)用與最佳實(shí)踐
作者名：夏慧軍編著
本章字?jǐn)?shù)： 1099字
更新時(shí)間： 2018-12-29 19:05:59

1.1 認(rèn)識(shí)JavaScript從表單驗(yàn)證開(kāi)始

在Web應(yīng)用中，我們幾乎每天都會(huì)使用到各種各樣的表單，表單是客戶端瀏覽器與服務(wù)器端進(jìn)行數(shù)據(jù)交換的最常用的一種方式。它將客戶端的復(fù)雜數(shù)據(jù)以一種服務(wù)器端能夠理解的方式傳到服務(wù)器端程序進(jìn)行處理。圖1-1所示就是最常見(jiàn)的一個(gè)Web應(yīng)用系統(tǒng)的登錄表單。

圖1-1 一個(gè)Web應(yīng)用系統(tǒng)的登錄表單

通常來(lái)說(shuō)，要登錄該系統(tǒng)，必須輸入用戶名與密碼，然后再單擊“登錄”按鈕進(jìn)行登錄。但是，在一些特殊情況下，可能用戶名或者密碼還沒(méi)有輸入，用戶就直接單擊了“登錄”按鈕，如果該系統(tǒng)是必須要求用戶輸入用戶名與密碼的話，很顯然，將這種不完整的數(shù)據(jù)提交給登錄處理程序是沒(méi)有任何意義的。但是對(duì)于絕大多數(shù)應(yīng)用來(lái)說(shuō)，在這種情況下會(huì)出現(xiàn)如圖1-2所示的錯(cuò)誤提示，并且會(huì)阻止表的提交。

圖1-2 登錄表單的驗(yàn)證

這是怎樣實(shí)現(xiàn)的呢？這就是利用JavaScript實(shí)現(xiàn)了對(duì)該登錄表單的驗(yàn)證，并且在驗(yàn)證沒(méi)有通過(guò)的情況下阻止了表單的提交。

大部分Web程序員第一次接觸JavaScript都無(wú)一例外是表單驗(yàn)證：在對(duì)JavaScript一無(wú)所知的情況下，被JavaScript簡(jiǎn)單但靈活、方便的驗(yàn)證功能所吸引，從而開(kāi)始學(xué)習(xí)JavaScript。基本上沒(méi)有Web程序員能夠抵擋住JavaScript的這種誘惑，因?yàn)樵跒g覽器嵌入JavaScript之前的Web應(yīng)用中，要實(shí)現(xiàn)這種類似的驗(yàn)證功能，是煩瑣且資源消耗大的事情：必須將數(shù)據(jù)提交到服務(wù)器，由服務(wù)器對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)，然后服務(wù)器將校驗(yàn)結(jié)果發(fā)送給前端瀏覽器，從而通知用戶輸入錯(cuò)誤。

在這個(gè)過(guò)程中，有數(shù)據(jù)的提交，有頁(yè)面的切換，有服務(wù)器與網(wǎng)絡(luò)資源的使用；而使用JavaScript，只需要在HTML中寫下如代碼1-1清單中所示的名為“checkLogin”的簡(jiǎn)單函數(shù)，就可以在沒(méi)有數(shù)據(jù)提交、沒(méi)有頁(yè)面切換、沒(méi)有服務(wù)器與網(wǎng)絡(luò)資源的情況下完成相同的功能。

代碼1-1清單在1-1.html文件中

#001  <HTML>
#002  <HEAD>
#003  <TITLE>JavaScript Book--代碼1-1</TITLE>
#004  </HEAD>
#005  <BODY>
#006  <TABLE width="245" border="0" valign="middle" align="center" cellpadding="3" cellspacing="1" bgcolor="#999999">
#007  <FORM METHOD="POST" ACTION="login.jsp" onsubmit="return checkLogin (this); ">
#008    <TR bgcolor="#9FBFDF">
#009         <TD colspan="2"><strong>歡迎使用！</strong></TD>
#010   </TR>
#011    <TR bgcolor="#E3F1F9">
#012         <TD nowrap>用戶名：</TD>
#013      <TD><INPUT TYPE="text" NAME="userName" maxlength="20"></TD>
#014   </TR>
#015    <TR bgcolor="#E3F1F9">
#016         <TD nowrap>密碼：</TD>
#017      <TD><INPUT TYPE="password" NAME="passWord" maxlength="20"></TD>
#018   </TR>
#019    <TR bgcolor="#E3F1F9">
#020      <TD colspan="2">
#021         <table width="100%" border="0" cellpadding="0" cellspacing="0">
#022             <tr>
#023         <td width="30%">&nbsp; </td>
#024         <td width="*"><INPUT TYPE="submit"value="登錄">&nbsp; <INPUT TYPE=
"reset" value="清空"></td>
#025             </tr>
#026         </table>
#027    </TD>
#028   </TR>
#029  </FORM>
#030  </TABLE>
#031  <! --開(kāi)始JavaScript腳本段-->
#032  <script language="JavaScript">
#033  //定義函數(shù)checkLogin，其傳入?yún)?shù)為待驗(yàn)證表單的句柄
#034  function checkLogin(handle) {
#035    if(handle.userName.value=="") {  //如果沒(méi)有輸入用戶名
#036         alert("必須輸入用戶名！");  //提示用戶必須輸入用戶名
#037         handle.userName.focus();    //將輸入焦點(diǎn)放置在用戶名輸入框上
#038         return false;     //阻止表單的提交
#039    }
#040    if(handle.passWord.value=="") {  //如果沒(méi)有輸入密碼
#041         alert("必須輸入密碼！");    //提示用戶必須輸入密碼
#042         handle.passWord.focus();    //將輸入焦點(diǎn)放置在密碼輸入框上
#043         return false;     //阻止表單提交
#044    }
#045    return true;  //表單可以進(jìn)行提交
#046  }
#047  </script>
#048  </BODY>
#049  </HTML>

對(duì)于代碼1-1更深入的了解是后面章節(jié)的內(nèi)容，在此不做詳細(xì)的講解；我們只需要了解，使用了JavaScript的表單驗(yàn)證只用了幾行簡(jiǎn)單的代碼就解決了曾經(jīng)如此復(fù)雜的問(wèn)題，并且解決得如此完美。

就這樣，JavaScript憑借著它簡(jiǎn)單但又近乎完美的表單驗(yàn)證解決方案吸引了每個(gè)Web程序員的視線，并最終成為他們開(kāi)發(fā)實(shí)踐工具箱中最常用的工具之一。

認(rèn)識(shí)JavaScript，從驗(yàn)證開(kāi)始，這是JavaScript成功的關(guān)鍵點(diǎn)，也是每個(gè)Web程序員和JavaScript結(jié)緣的起點(diǎn)。所以本書也從驗(yàn)證開(kāi)始，逐步進(jìn)入JavaScript的奇妙世界。

官术网_书友最值得收藏!

JavaScript典型應(yīng)用與最佳實(shí)踐

1.1 認(rèn)識(shí)JavaScript從表單驗(yàn)證開(kāi)始