復(fù)雜表單的動(dòng)態(tài)生成與動(dòng)態(tài)驗(yàn)證

2019-11-18 22:11:30

字體：大中小

供稿：網(wǎng)友

這里所謂的復(fù)雜表單，是指表單中包含多種不同的輸入類型，比如下拉列表框、單行文本、多行文本、數(shù)值等。在經(jīng)常需要更換這類表單的場(chǎng)合，需要有一個(gè)表單的動(dòng)態(tài)生成程序。本文介紹的正是這樣一個(gè)系統(tǒng)，它以數(shù)據(jù)庫保存表單定義數(shù)據(jù)，利用asp腳本動(dòng)態(tài)生成表單HTML代碼以及驗(yàn)證表單輸入的腳本。
一、定義數(shù)據(jù)庫表結(jié)構(gòu)

　　在Web上經(jīng)常可以看到“每周調(diào)查”之類的表單，這就是一種需要經(jīng)常更新的表單。如果有一個(gè)動(dòng)態(tài)生成表單及其驗(yàn)證腳本的程序，可以大大減少制作這些表單的工作量。

　　在本文的動(dòng)態(tài)表單生成與驗(yàn)證示例中，我們使用一個(gè)access數(shù)據(jù)庫來存儲(chǔ)有關(guān)表單的定義信息，同時(shí)為簡(jiǎn)單計(jì)，用戶在表單中輸入的數(shù)據(jù)也保存到同一數(shù)據(jù)庫。定義表單需要兩個(gè)表：第一個(gè)表（Definitons）用于表單輸入域的定義，第二個(gè)表（Lists）保存各個(gè)輸入域的附加信息，比如選擇列表的選擇項(xiàng)。

　　表Definitons包含如下字段：

FieldName —— 賦予表單輸入域的變量名字
Label —— 即文本標(biāo)簽，顯示在輸入域前面的提示性文字
Type —— 單個(gè)字符，該字符表示表單輸入域的形式和輸入值的類型，具體如下：
(t) 文本輸入框，即< INPUT TYPE="TEXT" >。
(n) 文本輸入框，但要求輸入數(shù)字值。
(m) 備注型內(nèi)容，用于注釋或其他大量文本的輸入，它是一個(gè)多行文本編輯框。
(b) 要求輸入“是”或“否”。本實(shí)現(xiàn)中將用復(fù)選框來獲取這種輸入，復(fù)選框的文本標(biāo)簽為“是”。如果用戶選中它，則返回值是“on”。
(r) 單選按鈕。
(l) 下拉列表框。
Min —— 僅對(duì)數(shù)字型輸入值有效，在這里給出最小值。在本例中有一個(gè)“Age”（年齡）數(shù)字型輸入框，它的最小值設(shè)定為1。
Max —— 該字段的值與輸入域形式有關(guān)。對(duì)于數(shù)字型輸入框，它表示的是允許的最大值。例如“Age”的Max值為100。對(duì)于文本輸入框，Max表示允許的最多字符個(gè)數(shù)。對(duì)于多行文本編輯框，Max表示可見區(qū)域的文本行數(shù)。
Required —— 表示是否必須輸入。這種類型的值如果沒有輸入，則輸入驗(yàn)證程序?qū)?bào)告錯(cuò)誤。在表單中，必須輸入的值以星號(hào)標(biāo)記，并以腳注的形式提示用戶該類值必須輸入。
　　本文的示例表單是一個(gè)ASP程序員調(diào)查表，在Definitons表中該表單的定義主要如下：

FieldName Label Type Min Max Required
Name 姓名文本(t) - 50 否
Age 年齡數(shù)字(n) 1 100 否
Sex 性別單選按鈕(r) - - 是
E-mail 郵件地址文本(t) - - 是
Language 編程語言下拉列表框(l) - - 否

　　表Lists用于保存輸入域定義的一些附加信息，本例有“Sex”和“Languages”兩個(gè)輸入值要用到它。表Lists非常簡(jiǎn)單，只包含如下三個(gè)字段：

FieldName —— 當(dāng)前記錄屬于哪個(gè)表單輸入域
Value —— 選擇項(xiàng)的值
Label —— 用戶所看到的選擇項(xiàng)的提示文本
　　輸入域“Sex”只能從兩個(gè)值選?。骸澳小被颉芭??！癓anguage”列出了幾種可應(yīng)用于ASP環(huán)境的編程語言，包括：VBScript，javaScript，C，Perl和“其他”。

　　第三個(gè)表“Records”保存用戶提交的內(nèi)容，它也包含三個(gè)字段，每個(gè)記錄對(duì)應(yīng)用戶的一次提交：

Record —— 備注類型，以查詢字符串形式保存的用戶輸入。
Created —— 用戶提交該表單的日期和時(shí)間。 RemoteIP —— 表單提交者的IP地址。
　　在實(shí)際應(yīng)用中可能要收集更多有關(guān)用戶的信息，為簡(jiǎn)單計(jì)，本例只記錄提交時(shí)間和用戶IP地址這兩個(gè)附加信息。

　　二、準(zhǔn)備工作

　　在完成上述數(shù)據(jù)結(jié)構(gòu)和表單的定義之后，接下來就可以編寫腳本。腳本的任務(wù)是生成表單以及處理用戶提交的表單。

　　無論是表單的生成還是處理，以下三個(gè)過程（任務(wù)）都是必不可少的：第一是確定驗(yàn)證類型，在生成表單時(shí)驗(yàn)證類型值通過查詢字符串獲得，在處理表單時(shí)從表單隱藏域讀取。程序支持的表單驗(yàn)證方式共有以下四種類型：不進(jìn)行驗(yàn)證，客戶端Javascript驗(yàn)證，服務(wù)器端ASP腳本驗(yàn)證，客戶端和服務(wù)器端都進(jìn)行驗(yàn)證（代號(hào)分別為0到3）。如果沒有在查詢字符串中指定合法的驗(yàn)證方式，則默認(rèn)第四種驗(yàn)證方式。這種驗(yàn)證處理方式使得我們可以靈活地應(yīng)用這個(gè)表單生成、處理系統(tǒng)，當(dāng)客戶端禁止使用JavaScript驗(yàn)證時(shí)就可以僅在服務(wù)器端執(zhí)行驗(yàn)證過程。下面是確定驗(yàn)證類型的代碼：

　    '檢查驗(yàn)證類型
　    iValType = Request.QueryString("val")
　    If IsNumeric(iValType) = False Then    iValType = 3
　    If iValType     > 3    Or iValType    <  0    Then iValType =3
　　第二個(gè)任務(wù)是打開數(shù)據(jù)庫連接，創(chuàng)建兩個(gè)記錄集對(duì)象：RS對(duì)象，這是本程序中的主要記錄集對(duì)象，用來操作Definitions表；RSList對(duì)象，主要用于從Lists表讀取數(shù)據(jù)。示例程序提供兩種數(shù)據(jù)庫連接方法：使用ODBC DSN或不使用ODBC DSN（使用DSN時(shí)需要先創(chuàng)建名為Dynamic的DSN，使用DSN連接數(shù)據(jù)庫的代碼已經(jīng)被注釋掉）。

　　第三個(gè)任務(wù)是在生成（或處理）表單腳本的前面（和后面）輸出一些靜態(tài)的HTML代碼，比如< HEAD >< /HEAD >，以及在腳本運(yùn)行結(jié)束的時(shí)候釋放RS、RSList等對(duì)象占用的資源。
　　除了完成上述任務(wù)的代碼外，示例應(yīng)用中其余ASP腳本可能生成的頁面有兩種類型：提問表單（見上圖）以及表單提交后出現(xiàn)的結(jié)果頁面（后者同時(shí)還負(fù)責(zé)用戶提交結(jié)果的記錄）。要確定究竟運(yùn)行哪一部分腳本，最簡(jiǎn)單的方法就是檢查是否已經(jīng)提交表單：如是，則處理表單；否則生成表單。

   　'是生成表單還是處理表單?
　    If Len(Request.Form) = 0 Then
　        '生成表單
　         ...略...
　    Else
　        '處理表單
　        ...略...
　    End If
　　三、動(dòng)態(tài)生成表單

　　生成表單時(shí)，程序按照Definitons表中的各個(gè)輸入域定義記錄，依次生成相應(yīng)的表單HTML代碼和JavaScript代碼。HTML代碼中首先要生成的是文本標(biāo)簽：

　sHTML = sHTML & vbTab & "< TR >" & vbCrLf & vbTab & vbTab
　sHTML = sHTML & "< TD VALIGN=" & Chr(34) & "TOP" & Chr(34)
　sHTML = sHTML & " >" & vbCrLf &  vbTab & vbTab & vbTab
　sHTML = sHTML & "< B >" & RS.Fields("Label")
　　然后程序檢查當(dāng)前輸入域是否必須輸入。如果必須，則在標(biāo)簽文本之后加一個(gè)星號(hào)（表示該值必須輸入），同時(shí)對(duì)于必須輸入的值，還要生成相應(yīng)的JavaScript代碼來驗(yàn)證它。對(duì)于單選按鈕或選擇列表，需進(jìn)一步檢查用戶確實(shí)選擇了某個(gè)選項(xiàng)；對(duì)于所有其他輸入類型，只要檢查輸入值不為空即可。

　　緊接文本標(biāo)簽的是表單的輸入元素，這些元素的HTML代碼根據(jù)Definitions表中指定的類型和屬性生成。再接下來就是根據(jù)輸入值要求生成執(zhí)行客戶端驗(yàn)證任務(wù)的JavaScript代碼。對(duì)于本例，只有數(shù)字型的值需要進(jìn)一步檢查以保證用戶的輸入確實(shí)是數(shù)字，而且數(shù)字值在許可的最大值和最小值之間。生成上述代碼之后，就可以結(jié)束一個(gè)表格行（也就是一個(gè)輸入域）繼續(xù)處理Definitions表的下一個(gè)記錄。一旦所有的數(shù)據(jù)庫記錄處理完畢，下一步就可以加入“提交”按鈕和“清除”按鈕的HTML代碼。如果換個(gè)角度來看，程序在這里的任務(wù)就是根據(jù)數(shù)據(jù)庫記錄生成各個(gè)輸入域，每個(gè)輸入域占用一個(gè)表格行，每個(gè)表格行二個(gè)單元：第一個(gè)單元用來顯示文本標(biāo)簽，第二個(gè)單元顯示輸入元素本身（代碼見dForm.asp）。

　　上述過程結(jié)束之后，表單的HTML代碼和驗(yàn)證用JavaScript函數(shù)分別保存到了變量sHTML和sJavaScript中。在把這些內(nèi)容寫入頁面之前，程序檢查客戶端是否要求執(zhí)行JavaScript驗(yàn)證，如果不要求執(zhí)行這類驗(yàn)證，則清除sJavaScript變量：

　If iValType = 0 Or iValType = 2 Then sJavaScript = ""
　　在輸出BODY標(biāo)記之后，程序輸出如下JavaScript函數(shù)：

　< SCRIPT  LANGUAGE="JavaScript" >
　< !--
　    function validate(TheForm){
　    //客戶端表單驗(yàn)證
　       < %=sJavaScript% >
　        return true;
　    }
　
　    function CheckRadio(objRadio){
　    //單選按鈕中是否有某個(gè)值被選中
　        for(var    n =    0; n <  objRadio.length;    n++){
　            if(objRadio[n].checked){
　              return true;
　            }
　        }
　        return false;
　    }
　
　    function CheckList(objList){
　    //是否已經(jīng)在選擇列表中選擇了某個(gè)值
　        for(var    n =    1; n <  objList.length; n++){
　            if(objList.options[n].selected){
　                return true;
　            }
　        }
　        return false;
　    }
　//-- >
　< /Script >
　　如果客戶端不需要JavaScript驗(yàn)證，則validate函數(shù)只剩下一個(gè)“return true”語句。上面代碼中的后面兩個(gè)靜態(tài)JavaScript函數(shù)（CheckRadio和CheckList）用于驗(yàn)證單選按鈕和下拉列表框，當(dāng)這兩種輸入域需要驗(yàn)證時(shí)validate函數(shù)將調(diào)用它們。

　　現(xiàn)在可以開始把表單寫入頁面：

　< FORM ACTION="./dform.asp" METHOD="POST" NAME="MyForm" onSubmit="return validate(this)" >
　　在這里，只有當(dāng)validate函數(shù)返回true時(shí)才執(zhí)行表單提交操作。因此當(dāng)客戶端JavaScript驗(yàn)證功能關(guān)閉時(shí)，validate函數(shù)將自動(dòng)返回true。

　　接下來要加入的是名為val的隱藏域。如前所述，該值指示表單的驗(yàn)證模式。

　< INPUT TYPE="HIDDEN" NAME="val" VALUE="< %=iValType% >" >
　　當(dāng)用戶提交表單時(shí)，處理腳本將根據(jù)該值確定是否執(zhí)行服務(wù)器端驗(yàn)證。

　　然后輸出的是表格標(biāo)記以及表格標(biāo)題。標(biāo)題保存在變量sTitleLabel中，該值在腳本開始執(zhí)行時(shí)初始化：

　< TABLE BORDER="0" >
　    < TR >
　        < TD COLSPAN="2" ALIGN="CENTER" >
　            < H2 >< %=sTitleLable% >< /H2 >
　        < /TD >
　    < /TR >
　　作為改進(jìn)措施，可以在表Definitions、Lists和Records中增加一個(gè)字段FormID。FormID唯一標(biāo)識(shí)一個(gè)表單，這樣程序就可以同時(shí)地定義多個(gè)表單、保存多個(gè)表單的用戶應(yīng)答結(jié)果。至于上面的sTitleLabel，我們可以用另外一個(gè)表（比如Forms）來保存。

　　緊接著表格標(biāo)記和表格標(biāo)題，程序輸出的是HTML表單以及“提交”、“清除”按鈕的代碼。在此之后，程序檢查sHTML字符串中是否包含“*”，如包含的話說明表單中存在必須輸入的內(nèi)容，此時(shí)就輸出一個(gè)腳注以說明該星號(hào)的含義。

　< %=sHTML% >
　  < TR >
　    < TD COLSPAN="2" ALIGN="CENTER" >
　      < INPUT TYPE="SUBMIT" VALUE="提交表單" > < INPUT TYPE="reset" VALUE="清除" >
　    < /TD >
　< %
　    '是否存在必需輸入的表單域,如存在,則輸出表單腳注解釋'*'的含義
　    If InStr(sHTML,"*") Then
　% >
　  < /TR >
　    < TD COLSPAN="2" ALIGN="CENTER" >
　      < FONT SIZE="2" >注意：有星號(hào)標(biāo)記的值必需輸入。< /FONT >
　    < /TD >
　  < /TR >
　< %
　    End If
　% >
　< /TABLE >
　< /FORM >
　　至此為止，表單的生成任務(wù)已經(jīng)完成。

　　四、處理提交結(jié)果

　　 ASP腳本剩下的任務(wù)是服務(wù)器端的表單處理，包括驗(yàn)證、將結(jié)果保存到數(shù)據(jù)庫以及“提交成功/失敗”頁面的顯示。在這部分表單驗(yàn)證代碼中用到了一個(gè)字符串變量sBadForm，程序用它來保存錯(cuò)誤信息。如果在驗(yàn)證過程結(jié)束時(shí)sBadForm為空，說明用戶提交的表單是合法的；否則，拒絕該表單的提交并把sBadForm返回給瀏覽器。

　　不管表單采用哪種驗(yàn)證模式，檢查HTTP_REFERER都是一種好的習(xí)慣。這種檢查可以防止腳本被盜用。要檢查某個(gè)POST是否來自本網(wǎng)站的頁面或腳本，只需比較兩個(gè)服務(wù)器變量即可：

　    If InStr(Request.ServerVariables("HTTP_REFERER"), _
　             Request.ServerVariables("HTTP_HOST")) = 0 Then
　      sBadForm = "< LI >表單提交自不正確的位置。" & vbCrlf
　    End If
　　如果表單的隱藏域指示必須進(jìn)行服務(wù)器端驗(yàn)證，則程序遍歷表單定義數(shù)據(jù)庫記錄作相應(yīng)的檢查，其過程與表單的生成非常相似，只不過此時(shí)程序是驗(yàn)證表單，且把輸入值非法信息加入到sBadForm中去而已。具體代碼見dForm.asp。

　　程序最后檢查sBadForm是否為空。如不為空，則拒絕表單提交并將sBadForm寫入瀏覽器。如果sBadForm為空，則在Records表增加一個(gè)記錄保存表單數(shù)據(jù)。在保存表單內(nèi)容之前需要?jiǎng)h除隱藏域val，這個(gè)隱藏域總是表單的第一個(gè)輸入域：

　    If Len(sBadForm) = 0 Then
　      RS.Open "Records", DB, 3, 2, &H0002
　      RS.AddNew
　      RS.Fields("Record") = Mid(Request.Form, InStr(Request.Form, "&") + 1)
　      RS.Fields("Created") = Now()
　      RS.Fields("RemoteIP") = Request.ServerVariables("REMOTE_ADDR")
　      RS.Update
　      Response.Write("< H1 >謝謝.< /H1 >")
　      RS.Close
　    Else
　      Response.Write("< H1 >表單提交失敗。< /H1 >")
　      Response.Write(vbCrLf & sBadForm)
　    End If
　  End If
　　這就是服務(wù)器端表單處理的全部過程。根據(jù)是否存在已經(jīng)提交的表單，我們可以把前面生成表單的代碼和這里表單處理的代碼用If語句封裝，使得這兩部分腳本共享部分公用代碼，比如HTML文檔的頭、數(shù)據(jù)庫對(duì)象的創(chuàng)建和資源釋放等。

　　總地看來，dForm.asp只具備了動(dòng)態(tài)表單生成、驗(yàn)證所必需的核心功能，忽略了許多細(xì)節(jié)問題的處理。比如前面已經(jīng)提到的多表單問題：增加一個(gè)表管理多個(gè)表單，使得腳本具有管理、生成、處理指定表單的能力。另外一個(gè)明顯的缺乏是表單定義數(shù)據(jù)的增加、刪除和更新功能，以及用戶提交結(jié)果數(shù)據(jù)的訪問，這類功能可以在一個(gè)獨(dú)立的程序中實(shí)現(xiàn)，而且在大多數(shù)情況下可以做成傳統(tǒng)的應(yīng)用程序（非B/S結(jié)構(gòu)的應(yīng)用）。最后，dForm.asp支持的輸入域類型也有限，在實(shí)踐中可能會(huì)有其他的表單輸入要求，比如專用的e-mail地址輸入框等。然而，對(duì)于那些經(jīng)常要更新表單的網(wǎng)站來說，本文所討論的表單動(dòng)態(tài)生成、動(dòng)態(tài)驗(yàn)證功能確實(shí)是非常有用的。

上一篇：對(duì)數(shù)據(jù)庫連接問題的一點(diǎn)總結(jié)

下一篇：如何設(shè)置二級(jí)域名？