用ASP動態產生JS表單驗證代碼

表單的驗證是開發WEB應用程式中常遇到的一關。有時候我們必須保證表單的某些項必須填寫、必須為數字、必須是指定的位元等等，這時候就要用到表單驗證了，一般我們常用的表單驗證有２種方式：
１、編寫javascript或VBScript的表單驗證函式，在用戶端進行驗證；
２、在表單提交後，使用ASP的方法Request.Form擷取表單的輸入值進行判斷，然後返回結果，這是在服務端進行驗證；

這２種方式都有其優缺點，比如第１種方式速度比較快，而且通常使用警告框的方式，使用者能夠很快的根據提示完成表單的填寫，但是缺點就是使用者的瀏覽器必須是支援javascript指令碼的，再不然如果他關閉了javascript，那就!@#$%&^*（小田已經倒在地上了^_^）；而第２種方式的相容性比較好，但是缺點是速度比較慢（提交到服務端，在返回）而且使用也不方便。這次主要是用javascript的方法來驗證，當然，如果同時用２種方式來驗證是最保險了，不過（汗…………）要累死我們這些程式員了：）

上面解釋了表單驗證的２中方式，下面就具體來講講動態產生javascript的概念。為什麼要動態產生呢？因為這種用戶端的驗證代碼是很煩瑣的，如果每次都要自己編寫真是累啊！用慣DW(Dreamweaver)或UD的朋友可能通常使用表單驗證的外掛程式，使用後產生的程式碼也沒有藝術感，而且很多是用不到的（代碼冗餘）。小田要講的是，產生完全符合表單情況的代碼。

聲明：小田對javascript並不精通，這裡只是想談談動態產生的方法，JS的高手完全可以自己改。

那麼我們開始嘍。

１、我們先來看看一段簡單的javascript的驗證代碼：

<script language=javascript>
<!--
//Power by xiaotian 2002
function checkSubmit()
{
if ((document.form1.name.value)==')
{
window.alert ('姓名必須填寫');
document.form1.name.select();
document.form1.name.focus();
return false;
}
else
return true;
}
//-->
</script>

<form name="form1" >
<input type="text" name="name">
</form>

這段代碼是驗證表單form1的name表單項，必須填寫內容。這裡就有幾個關鍵的部分：表單網域名稱稱、表單項名稱、判斷語句；這些就是我們下面編寫ASP函數的關鍵了。

２、如何產生javascript代碼。最簡單的，就是用Response.Write輸出了，比如把上面代碼輸出就可以是：

<%
Response.Write "<script language=javascript>"&vbCrlf&_
"<!--"&vbCrlf&_
"//Power by xiaotian 2002"&vbCrlf&_
"function checkSubmit()"&vbCrlf&_
"{"&vbCrlf&_
"if ((document.form1.name.value)==')"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('姓名必須填寫');"&vbCrlf&_
"document.form1.name.select();"&vbCrlf&_
"document.form1.name.focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"else"&vbCrlf&_
"return true;"&vbCrlf&_
"}"&vbCrlf&_
"//-->"&vbCrlf&_
"</script>"&vbCrlf&_
%>

這裡的vbCrlf是一個斷行符號換行，&是串連符，&_是代碼換行串連的字元。

３、這段代碼的頭和尾是基本固定不變的，變化的是中間的if判斷部分，我們可以先把這部分寫成函數，小田已經寫好一個了，大家可以參考一下，下面是代碼：

Function findJS(frmName,errStr)
Dim tmpArr
Dim i
'參數值
i=0
'擷取錯誤清單，建立數組
tmpArr=Split(errStr,"|")
'輸出查詢條件
Select Case tmpArr(i+1)
Case "0" '必填的Text類型
findJS="if ((document."&frmName&"."&tmpArr(i)&".value)=="""")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "1" '必填的ListMenu類型
findJS="if ((document."&frmName&"."&tmpArr(i)&".value)=="""")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "2" '必須為數位Text類型
findJS="if (isNaN(document."&frmName&"."&tmpArr(i)&".value))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "3" '必須為指定位元的Text類型
findJS="if (document."&frmName&"."&tmpArr(i)&".value.length="&tmpArr(i+3)&")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "4" '必須大於指定位元的Text類型
findJS="if (document."&frmName&"."&tmpArr(i)&".value.length<"&tmpArr(i+3)&")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "5" '必須為Email的Text類型
findJS="if ((!emailReg.test(document."&frmName&"."&tmpArr(i)&".value))&&(document."&frmName&"."&tmpArr(i)&".value!='))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "6" '必須為a-z或0-9的字元的Text類型
findJS="if ((!pwdReg.test(document."&frmName&"."&tmpArr(i)&".value))&&(document."&frmName&"."&tmpArr(i)&".value!='))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "7" '確認密碼和密碼必須相等的Text類型
findJS="if ((document."&frmName&"."&tmpArr(i)&".value)!=(document."&frmName&"."&tmpArr(i+3)&".value))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
End Select
End Function

其中參數frmName是指表單域的名稱，而errStr是表單項＋判斷類型＋出錯提示的一個數組，其文法為：

"表單項名稱1|判斷類型1|出錯提示1|[選擇性參數1],表單項名稱2|判斷類型2|出錯提示2|[選擇性參數2],..."
表單項名稱：例如name等，是自訂的
判斷類型：就是Case語句裡的0,1,2,3等等
出錯提示：例如 姓名必須填寫 等，是自訂的
選擇性參數：比如在判斷確認密碼和密碼必須相等的Text類型時，選擇性參數就是想要判斷相當的密碼錶單項名稱；在必須為指定位元的Text類型時，選擇性參數就是指定的位元。當然可以選參數可以是好幾個，具體就看你Case語句裡的if是怎麼編的了。

這裡已經羅列了８種不同的情況的if判斷語句，大家可以繼續添加上去，注意這裡的幾個特別的部分，比如序號５email格式的判斷（emailReg.test），這裡用到了Regex，而Regex的定義，我們可以統一放在if判斷的外面。

４、函數CheckForm_JS(frmName,errStr)。這個函數的作用是最後將一個個javascript的if判斷整合起來，代碼如下：

Sub CheckForm_JS(frmName,errStr)
Dim tmpArr
Dim i
Dim strShow '輸出JS的字串
'擷取錯誤清單，建立數組
tmpArr=Split(errStr,",")
'寫JS
for i=0 to UBound(tmpArr)
if i<>0 then
strShow=strShow&"else "&findJS(frmName,tmpArr(i))
else
strShow=strShow&findJS(frmName,tmpArr(i))
end if
next
'輸出
strShow="<script language=javascript>"&vbCrlf&_
"<!--"&vbCrlf&_
"//Power by xiaotian 2002"&vbCrlf&_
"function checkSubmit()"&vbCrlf&_
"{"&vbCrlf&_
"var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;"&vbCrlf&_
"var pwdReg = /[a-z0-9]$/;"&vbCrlf&_
strShow&_
"else"&vbCrlf&_
"return true;"&vbCrlf&_
"}"&vbCrlf&_
"//-->"&vbCrlf&_
"</script>"
Response.Write strShow
End Sub

大家注意到這裡的一段：

if i<>0 then
strShow=strShow&"else "&findJS(frmName,tmpArr(i))
else
strShow=strShow&findJS(frmName,tmpArr(i))
end if

作用是把第1個以後javascript的if語句寫成else if，而

"var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;"&vbCrlf&_
"var pwdReg = /[a-z0-9]$/;"&vbCrlf&_

段代碼就是Regex的定義了，大家可以根據需要擴充。

５、使用方法。我們可以把這２段函數寫在一個檔案裡，比如CheckForm_JS.asp，然後在要使用的頁調用，比如：

<!--#include file="checkform_js.asp" -->
<%
Call checkform_js("frm","name|0|姓名必須填寫,number|2|編號必須是數字,number|3|編號指定為６位元|6,email|5|email的格式不正確")
%>

<form name="frm" >
姓名：<input type="text" name="name">
編號：<input type="text" name="number">
email：<input type="text" name="email">
<input type="submit" name="submit" value="提交">
</form>

在實際的使用中，errStr可能會是很長的字串，書寫中我們可以用一斷行的方法寫，比如上面的errStr我們可以這樣寫：

<%
Dim errStr
errStr="name|0|姓名必須填寫,"&_
"number|2|編號必須是數字,number|3|編號指定為６位元|6,"&_
"email|5|email的格式不正確"
Call checkform_js("frm",errStr)
%>

注意：由於函數中數組的分隔字元是"|"和","，所以，errStr中的錯誤提示不能使用這２個字元，大家可以用全形的來代替。

６、代碼運行情況。以上代碼運行後，就可以得到下面的javascript：

<script language=javascript>
<!--
//Power by xiaotian 2002
function checkSubmit()
{
var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;
var pwdReg = /[_a-z0-9]$/;
if ((document.frm.name.value)=="")
{
window.alert ('姓名必須填寫');
document.frm.name.select();
document.frm.name.focus();
return false;
}
else if (isNaN(document.frm.number.value))
{
window.alert ('編號必須是數字');
document.frm.number.select();
document.frm.number.focus();
return false;
}
else if (document.frm.number.value.length=6)
{
window.alert ('編號指定為６位元');
document.frm.number.select();
document.frm.number.focus();
return false;
}
else if ((!emailReg.test(document.frm.email.value))&&(document.frm.email.value!='))
{
window.alert ('email的格式不正確');
document.frm.email.select();
document.frm.email.focus();
return false;
}
else
return true;
}
//-->
</script>

熟悉JS的朋友可以自己擴充這個函數，相信可以滿足大家的驗證要求了。