明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線(xiàn)學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

用ASP動(dòng)態(tài)生成JS表單驗(yàn)證代碼

[摘要]表單的驗(yàn)證是開(kāi)發(fā)WEB應(yīng)用程序中常遇到的一關(guān)。有時(shí)候我們必須保證表單的某些項(xiàng)必須填寫(xiě)、必須為數(shù)字、必須是指定的位數(shù)等等,這時(shí)候就要用到表單驗(yàn)證了,一般我們常用的表單驗(yàn)證有2種方式: 1、編寫(xiě)java...

表單的驗(yàn)證是開(kāi)發(fā)WEB應(yīng)用程序中常遇到的一關(guān)。有時(shí)候我們必須保證表單的某些項(xiàng)必須填寫(xiě)、必須為數(shù)字、必須是指定的位數(shù)等等,這時(shí)候就要用到表單驗(yàn)證了,一般我們常用的表單驗(yàn)證有2種方式: 
1、編寫(xiě)javascript或VBScript的表單驗(yàn)證函數(shù),在客戶(hù)端進(jìn)行驗(yàn)證;
2、在表單提交后,使用ASP的方法Request.Form獲取表單的輸入值進(jìn)行判斷,然后返回結(jié)果,這是在服務(wù)端進(jìn)行驗(yàn)證;

這2種方式都有其優(yōu)缺點(diǎn),比如第1種方式速度比較快,而且通常使用警告框的方式,用戶(hù)能夠很快的根據(jù)提示完成表單的填寫(xiě),但是缺點(diǎn)就是用戶(hù)的瀏覽器必須是支持javascript腳本的,再不然如果他關(guān)閉了javascript,那就!@#$%&^*(小田已經(jīng)倒在地上了^_^);而第2種方式的兼容性比較好,但是缺點(diǎn)是速度比較慢(提交到服務(wù)端,在返回)而且使用也不方便。這次主要是用javascript的方法來(lái)驗(yàn)證,當(dāng)然,如果同時(shí)用2種方式來(lái)驗(yàn)證是最保險(xiǎn)了,不過(guò)(汗…………)要累死我們這些程序員了:)

上面解釋了表單驗(yàn)證的2中方式,下面就具體來(lái)講講動(dòng)態(tài)生成javascript的概念。為什么要?jiǎng)討B(tài)生成呢?因?yàn)檫@種客戶(hù)端的驗(yàn)證代碼是很煩瑣的,如果每次都要自己編寫(xiě)真是累!用慣DW(Dreamweaver)或UD的朋友可能通常使用表單驗(yàn)證的插件,使用后生成的代碼也沒(méi)有藝術(shù)感,而且很多是用不到的(代碼冗余)。小田要講的是,生成完全符合表單情況的代碼。

聲明:小田對(duì)javascript并不精通,這里只是想談?wù)剟?dòng)態(tài)生成的方法,JS的高手完全可以自己改。

那么我們開(kāi)始嘍。

1、我們先來(lái)看看一段簡(jiǎn)單的javascript的驗(yàn)證代碼:

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

<form name="form1" onsubmit="javascript:return checkSubmit()"> 
<input type="text" name="name"> 
</form> 

這段代碼是驗(yàn)證表單form1的name表單項(xiàng),必須填寫(xiě)內(nèi)容。這里就有幾個(gè)關(guān)鍵的部分:表單域名稱(chēng)、表單項(xiàng)名稱(chēng)、判斷語(yǔ)句;這些就是我們下面編寫(xiě)ASP函數(shù)的關(guān)鍵了。

2、如何生成javascript代碼。最簡(jiǎn)單的,就是用Response.Write輸出了,比如把上面代碼輸出就可以是:

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

這里的vbCrlf是一個(gè)回車(chē)換行,&是連接符,&_是代碼換行連接的字符。

3、這段代碼的頭和尾是基本固定不變的,變化的是中間的if判斷部分,我們可以先把這部分寫(xiě)成函數(shù),小田已經(jīng)寫(xiě)好一個(gè)了,大家可以參考一下,下面是代碼:

Function findJS(frmName,errStr) 
Dim tmpArr
Dim i
'參數(shù)值
i=0
'獲取錯(cuò)誤列表,建立數(shù)組
tmpArr=Split(errStr," ")
'輸出查詢(xún)條件
Select Case tmpArr(i+1)
Case "0" '必填的Text類(lèi)型
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類(lèi)型
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" '必須為數(shù)字的Text類(lèi)型
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" '必須為指定位數(shù)的Text類(lèi)型
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" '必須大于指定位數(shù)的Text類(lèi)型
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類(lèi)型
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類(lèi)型
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" '確認(rèn)密碼和密碼必須相等的Text類(lèi)型
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


其中參數(shù)frmName是指表單域的名稱(chēng),而errStr是表單項(xiàng)+判斷類(lèi)型+出錯(cuò)提示的一個(gè)數(shù)組,其語(yǔ)法為:

"表單項(xiàng)名稱(chēng)1 判斷類(lèi)型1 出錯(cuò)提示1 [可選參數(shù)1],表單項(xiàng)名稱(chēng)2 判斷類(lèi)型2 出錯(cuò)提示2 [可選參數(shù)2],..."
表單項(xiàng)名稱(chēng):例如name等,是自定義的
判斷類(lèi)型:就是Case語(yǔ)句里的0,1,2,3等等
出錯(cuò)提示:例如 姓名必須填寫(xiě) 等,是自定義的
可選參數(shù):比如在判斷確認(rèn)密碼和密碼必須相等的Text類(lèi)型時(shí),可選參數(shù)就是想要判斷相當(dāng)?shù)拿艽a表單項(xiàng)名稱(chēng);在必須為指定位數(shù)的Text類(lèi)型時(shí),可選參數(shù)就是指定的位數(shù)。當(dāng)然可以選參數(shù)可以是好幾個(gè),具體就看你Case語(yǔ)句里的if是怎么編的了。

這里已經(jīng)羅列了8種不同的情況的if判斷語(yǔ)句,大家可以繼續(xù)添加上去,注意這里的幾個(gè)特別的部分,比如序號(hào)5email格式的判斷(emailReg.test),這里用到了正則表達(dá)式,而正則表達(dá)式的定義,我們可以統(tǒng)一放在if判斷的外面。

4、函數(shù)CheckForm_JS(frmName,errStr)。這個(gè)函數(shù)的作用是最后將一個(gè)個(gè)javascript的if判斷整合起來(lái),代碼如下:

Sub CheckForm_JS(frmName,errStr)
Dim tmpArr
Dim i
Dim strShow '輸出JS的字符串
'獲取錯(cuò)誤列表,建立數(shù)組
tmpArr=Split(errStr,",")
'寫(xiě)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&_
"http://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&_
"http://-->"&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個(gè)以后javascript的if語(yǔ)句寫(xiě)成else if,而

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

段代碼就是正則表達(dá)式的定義了,大家可以根據(jù)需要擴(kuò)充。

5、使用方法。我們可以把這2段函數(shù)寫(xiě)在一個(gè)文件里,比如CheckForm_JS.asp,然后在要使用的頁(yè)調(diào)用,比如:

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

<form name="frm" onsubmit="javascript:return checkSubmit()">
姓名:<input type="text" name="name">
編號(hào):<input type="text" name="number">
email:<input type="text" name="email">
<input type="submit" name="submit" value="提交">
</form>

在實(shí)際的使用中,errStr可能會(huì)是很長(zhǎng)的字符串,書(shū)寫(xiě)中我們可以用一斷行的方法寫(xiě),比如上面的errStr我們可以這樣寫(xiě):

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

注意:由于函數(shù)中數(shù)組的分隔符是" "和",",所以,errStr中的錯(cuò)誤提示不能使用這2個(gè)字符,大家可以用全角的來(lái)代替。

6、代碼運(yùn)行情況。以上代碼運(yùn)行后,就可以得到下面的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 ('姓名必須填寫(xiě)');
document.frm.name.select();
document.frm.name.focus();
return false;
}
else if (isNaN(document.frm.number.value))
{
window.alert ('編號(hào)必須是數(shù)字');
document.frm.number.select();
document.frm.number.focus();
return false;
}
else if (document.frm.number.value.length=6)
{
window.alert ('編號(hào)指定為6位數(shù)');
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的朋友可以自己擴(kuò)充這個(gè)函數(shù),相信可以滿(mǎn)足大家的驗(yàn)證要求了。