用ASP動態生成JavaScript的表單驗證程式碼 (轉)
1、編寫script或的表單驗證,在客戶端進行驗證;
2、在表單提交後,使用的方法Request.Form獲取表單的輸入值進行判斷,然後返回結果,這是在服務端進行驗證;
這2種方式都有其優缺點,比如第1種方式速度比較快,而且通常使用警告框的方式,能夠很快的根據提示完成表單的填寫,但是缺點就是使用者的必須是支援指令碼的,再不然如果他關閉了JavaScript,那就!@#$%&^*(小田已經倒在地上了^_^);而第2種方式的相容性比較好,但是缺點是速度比較慢(提交到服務端,在返回)而且使用也不方便。這次主要是用JavaScript的方法來驗證,當然,如果同時用2種方式來驗證是最保險了,不過(汗…………)要累死我們這些程式設計師了:)
上面解釋了表單驗證的2中方式,下面就具體來講講動態生成JavaScript的概念。為什麼要動態生成呢?因為這種客戶端的驗證程式碼是很煩瑣的,如果每次都要自己編寫真是累啊!用慣DW(Dreamweaver)或UD的朋友可能通常使用表單驗證的,使用後生成的程式碼也沒有藝術感,而且很多是用不到的(程式碼冗餘)。小田要講的是,生成完全符合表單情況的程式碼。
宣告:小田對JavaScript並不精通,這裡只是想談談動態生成的方法,JS的高手完全可以自己改。
那麼我們開始嘍。
1、我們先來看看一段簡單的JavaScript的驗證程式碼:
這段程式碼是驗證表單form1的name表單項,必須填寫內容。這裡就有幾個關鍵的部分:表單域名稱、表單項名稱、判斷語句;這些就是我們下面編寫ASP函式的關鍵了。
2、如何生成JavaScript程式碼。最簡單的,就是用Response.Write輸出了,比如把上面程式碼輸出就可以是:
Response.Write "
%>
這裡的vbCrlf是一個回車換行,&是連線符,&_是程式碼換行連線的字元。
3、這段程式碼的頭和尾是基本固定不變的,變化的是中間的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"{"&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" '必須為E的Text型別
findJS="if ((!Reg.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是怎麼編的了。
這裡已經羅列了8種不同的情況的if判斷語句,大家可以繼續新增上去,注意這裡的幾個特別的部分,比如序號5email格式的判斷(emailReg.test),這裡用到了正則,而正規表示式的定義,我們可以統一放在if判斷的外面。
4、函式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="
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&_
段程式碼就是正規表示式的定義了,大家可以根據需要擴充。
5、使用方法。我們可以把這2段函式寫在一個裡,比如CheckForm_JS.asp,然後在要使用的頁,比如:
<!--#include file="checkform_js.asp" -->
Call checkform_js("frm","name|0|姓名必須填寫,number|2|編號必須是數字,number|3|編號指定為6位數|6,email|5|email的格式不正確")
%>
在實際的使用中,errStr可能會是很長的字串,書寫中我們可以用一斷行的方法寫,比如上面的errStr我們可以這樣寫:
Dim errStr
errStr="name|0|姓名必須填寫,"&_
"number|2|編號必須是數字,number|3|編號指定為6位數|6,"&_
"email|5|email的格式不正確"
Call checkform_js("frm",errStr)
%>
注意:由於函式中陣列的分隔符是"|"和",",所以,errStr中的錯誤提示不能使用這2個字元,大家可以用全形的來代替。
6、程式碼執行情況。以上程式碼執行後,就可以得到下面的JavaScript:
熟悉JS的朋友可以自己擴充這個函式,相信可以滿足大家的驗證要求了。
函式打包:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/10752043/viewspace-996649/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript 表單驗證程式碼例項JavaScript
- javascript表單驗證JavaScript
- JavaScript 表單驗證JavaScript
- JavaScript驗證碼生成和驗證效果JavaScript
- JavaScript 表單及表單驗證JavaScript
- 常用的表單驗證程式碼分享
- JavaScript表單驗證事件JavaScript事件
- Web 表單驗證 javascriptWebJavaScript
- 生成驗證碼程式程式碼
- javascript動態實現的表單提交效果程式碼例項JavaScript
- jQuery表單驗證簡單程式碼例項jQuery
- jquery登陸表單簡單驗證程式碼jQuery
- javascript實現的生成驗證碼隨機數程式碼例項JavaScript隨機
- java隨機動態生成漢字驗證碼圖片的例項程式碼分享Java隨機
- JavaScript表單不為空驗證JavaScript
- ASP伺服器端表單驗證類伺服器
- Spring boot 生成動態驗證碼並前後端校驗Spring Boot後端
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- asp.net驗證碼應用ASP.NET
- 直播平臺原始碼,JavaScript表單驗證密碼強度原始碼JavaScript密碼
- 資料驗證的asp.net程式 (轉)ASP.NET
- javascript實現的身份證號碼驗證程式碼JavaScript
- 關於用java生成驗證碼Java
- 應用:隨機生成驗證碼隨機
- angular中關於表單動態驗證的一種新思路Angular
- JavaScript 動態生成select下拉選單JavaScript
- 表單驗證手機號碼格式例項程式碼
- web動態驗證碼的實現Web
- 實現動態驗證碼的思路
- HTML 互動式表單驗證HTML
- Emit動態生成程式碼MIT
- JavaScript 點選回車驗證提交表單JavaScript
- JavaScript------表單約束驗證DOM方法JavaScript
- Java隨機生成圖片與HTML表單中的驗證碼實現Java隨機HTML
- 用onsubmit做簡單表單驗證(37)MIT
- 前端工具-15個最佳的JavaScript表單驗證庫前端JavaScript
- jQuery實現的表單註冊驗證程式碼例項jQuery
- 用python生成驗證碼圖片Python