模板
教程
環境
性能
功能
管理
使用JavaScript創建智能表單
使用JavaScript創建智能表單
· 呂曉波·CPCW
驗證用戶輸入
在我們的網站中，經常會加入一些表單，要求用戶輸入類似姓名或郵件地址等的個人信息。為了確保用戶輸入的信息符合所期望的格式，我們可以編寫CGI程序或JavaScript腳本進行驗證。上述兩種方式相比較而言，后者更為理想。因為JavaScript腳本可以在數據被發送到服務端之前對其進行判斷和處理，而CGI程序只能在服務端執行，不可避免的會增加整個服務系統的負擔。
使用JavaScript的一種方法是創建一個偽提交按鈕調用預先編寫好的函數對用戶所輸入的信息進行驗證。對于符合規定格式的用戶數據使用submit()方法提交到服務端；而對于那些格式不正確的輸入則發出警告信息。其中，偽提交按鈕的代碼如下：
<INPUT TYPE="button" VALUE="Submit" onClick="validateForm()">
采用這種方法的缺陷在于必須要求用戶所使用的瀏覽器能夠支持JavaScript。如果瀏覽器不支持JavaScript或者用戶關閉了JavaScript支持功能，瀏覽器將無法執行onClick事件，從而使整個腳本失去作用。
為了能夠根據不同的用戶端環境提供最佳的解決方式，可以把驗證函數賦值給onSubmit屬性。代碼如下：
<FORM NAME="UserInfo" ACTION="/cgi-bin/submitUserInfo.pl"
METHOD="post" onSubmit="return validateForm()">
這樣，如果用戶端瀏覽器支持JavaScript，就能夠正確解釋onSubmit屬性，并根據 validateForm()函數對用戶輸入信息的驗證結果決定是否提交用戶信息；如果客戶端不支持JavaScript，將忽略onSubmit屬性，但是仍然能夠把用戶信息返回到服務端。只不過這時我們需要借助CGI程序在服務端對用戶數據進行驗證。雖然在功能上相對復雜一些，但是第二種方法對用戶更加友好，也更加智能化。
解析字符串
解析字符串是驗證表單輸入非常重要的一個方面。JavaScript提供了簡單實用的字符串處理功能，一般情況下，我們只需要掌握以下幾個字符串對象的方法即可：
String.length：字符串的長度
String.charAt(position)：字符在字符串中的所在位置
String.indexOf(searchFor [,startPosition])：在字符串中查找特定字符串的第一次出現位置
String.lastIndexOf(searchFor [,startPostion])：在字符串中查找特定字符串的最后一次出現位置
String.substring(i,j)：返回位于位置i和j之間的子字符串。
舉例來說，我們聲明了以下字符串變量：var myString = “Hello World.”;myString.length將會返回值12，這是因為myString字符串中包含12個字符。JavaScript從0開始計數，所以myString.charAt(0)返回字符H，myString.charAt(1)返回e，而myString.charAt(11)返回 “.”。
字符串對象的取子串方法就是從字符串中取出一段字符，其中以位置i為起點，在位置j結束，但是不包括位置j上的字符。例如，myString.substring(1,3)返回el而非ell。
字符串對象的檢索方法包括indexOf和lastIndexOf兩種相反操作。IndexOf返回指定字符串在字符串對象中第一次出現的位置。例如，myString.indexOf("World")返回6，即World字符串中第一個字符在myString中的出現位置。 LastIndexOf方法與IndexOf完全相同，只不過是從字符串結尾處開始查找匹配字符。例如，myString.indexOf("l")返回值為2，而myString.lastIndexOf ("l")則返回9。不論是IndexOf還是LastIndexOf，當找不到所要查找的字符串時，返回值都為-1。
下面，我們來看幾個具體應用。
在不同的頁面之間傳遞參數
假設我們的網站上有一位名叫Mary的用戶。Mary在網站的首頁面上輸入了自己的名稱，現在我們希望當Mary點擊主頁面上的按鈕或超斂接時，她所輸入的信息將會被傳送到下一個頁面。
首先，我們可以設計使用如下形式的URL：
http://www.myserver.com/mypage2.htm?Mary
然后，在mypage2.htm頁面中加入以下JavaScript代碼：
//把URL賦值給字符串變量
var URLString = window.location;
//找到字符“?”的位置
var start = URLString.indexOf("?");
//計算字符串長度
var end = URLString.length;
//刪除多余字符，保留用戶名稱
var userName = URLString.substring(start,end);
這樣，我們就在userName變量中保存了Mary的名稱，可以根據任何需要隨意使用。
驗證郵件地址
如果我們希望確保用戶所輸入的郵件地址中至少包含特殊字符 “@”和 “.”，可以編寫如下代碼：
//把郵件地址存入變量
var emailString = document.myForm.email.value;
//設定當前為有效狀態
var isValid = 1;
//如果郵件地址中沒有字符@則為無效
if (emailString.indexOf("@") == -1) {isValid = 0;}
//如果郵件地址中沒有字符 “.”同樣無效
if (emailString.indexOf(".") == -1) {isValid = 0;}
//如果格式符合規定則提交表單
if (isValid == 1) {document.myForm.submit();}
驗證數字信息
在對象身份證，郵編以及電話號碼這種數字信息進行有效性驗證的時候，我們一般只關心用戶輸入的數字位數是否正確，是否包含除數字之外的其它字符。
以郵編為例，如果我們限制用戶輸入的數字長度為6位，則可以使用以下代碼進行驗證：
if (myString.length != 6) {return false;}
檢查用戶是否輸入了除數字之外的其它字符的功能要稍微復雜一些。首先，我們需要設置循環流程對每一個字符進行判斷。然后，我們把每一個字符與0到9這10個數字進行比較，查看是否匹配。如果每一次都能夠找到匹配，則判定數據有效。代碼如下：
//按照字符數設置循環
for (var i = 0; i < myString.length; i++)
{
//預設變量isNumber
isNumber = 0;
//根據0到9這10個數字進行循環，如果找到匹配則變量isNumber值為1
for (var j=0; j<10; j++) if ("" + j == myText.charAt(i)) isNumber = 1;
if (isNumber == 0) {return false;}
}
return true;
}
表單提示
雖然我們可以按照上文所述，使用JavaScript對用戶的輸入信息進行驗證，但是很難考慮到所有可能發生的情況，因此最好的解決方法就是在頁面表單輸入區提供信息填寫指導。例如：
其中，“Enter Email”可以提示用戶應當在此輸入郵件地址。但是這里還有一點不足之處就是用戶在輸入信息之前，需要手工把類似“Enter Email”這種信息提示刪除。為了更加方便用戶的操作，我們可以對文本框進行以下定義：
<input type="text"
name="myText"
onFocus="if (this.value==this.defaultValue) this.value='';"
onBlur="if (this.value=='') this.value=this.defaultValue;"
>
這樣，當用戶點擊文本框準備輸入信息時（onFocus），文本框查看當前值是否與默認值（該例下的默認值為Enter Email）相等。如果兩值相同，則文本框認為用戶還沒有輸入任何信息，將自動清除顯示內容。當用戶點擊文本框之外的頁面其它區域時（onBlur），文本框查看其值是否為空，如果這樣，就以默認值作為當前顯示內容。當然，我們也可以去掉代碼中的onBlur部分，規定只要用戶點擊文本框，提示信息將不再出現。
小節
以上，我們對如何使用JavaScript創建不同功能和風格的表單進行了簡單的介紹。其實，在保證能夠正確的驗證用戶輸入的信息之外，頁面表單在設計時一定要多從用戶角度考慮，為用戶提供更加友好和方便的瀏覽界面，從細微處入手，給用戶留下一個好印象。
