? ??? 數據驗證涉及到很多方面的東西,在當前的技術領域里,從技術上來看可以說是分為傳統的驗證(同步方式)和Ajax(異步方式)驗證。如果從功能驗證上來看的話就包羅萬象了。比如非空驗證,對等驗證,格式驗證等等。在.NET里還有專門用于驗證的的幾個常見驗證控件,
RequiredFieldValidator
,
RangeValidator
,
RegularExpressionValidator
,
CompareValidator
,
CustomValidator以及
ValidationSummary等,這里不討論他們的使用及原理
。
一. 傳統的驗證方式
???? 在傳統的驗證中是采用同步表單提交的方法來處理的驗證請求。這種驗證方式的缺點很顯然而知了。表單提交一是傳輸的數據量比較大消耗資源,二是頁面處于同步方式隨著表單的提交會刷新頁面。下面我看來看看一個簡單的傳統驗證的實例:
??? 建議一個ASP.NET項目,將默認頁面改名為: TraditValidation.aspx ,在頁面.cs里定義一個模擬數據的方法如下:
<
script?language
=
"
javascript
"
>
function
?checkFrm()
{
?????
var
?tbUsername?
=
?document.getElementById(
"
tbUsername
"
);
?????
var
?msg?
=
?document.getElementById(
"
lblMessage
"
);
?????
var
?re?
=
?
/
^(\w{3,15})$
/
gim;
?????
if
?(re.test(tbUsername.value))
?????
{
?????????
return
?
true
;
?????}
?????
else
?????
{
?????????msg.innerHTML?
=
?
"
長度必須在3到15之間,且不包含字母、數字和下劃線以外的字符!
"
;
????msg.style.color?
=
?
"
red
"
;
????
return
?
false
;
?????}
}
<
/
script>
??? 轉到設計視圖,給頁面上放置兩個Lebal,一個TextBox,一個Button控件并適當的設置屬性,html代碼如下:
<
form?
id
="Form1"
?method
="post"
?runat
="server"
?onsubmit
="return?checkFrm()"
>
<
asp:Label?
id
="Label2"
?runat
="server"
?Font-Names
="黑體"
?Font-Bold
="True"
?Font-Size
="X-Large"
>
傳統的數據驗證
</
asp:Label
>
<
hr
>
<
div
>
用戶名:
</
div
>
<
asp:textbox?
id
="tbUsername"
?runat
="server"
></
asp:textbox
>
<
asp:button?
id
="btnVerify"
?runat
="server"
?Text
="檢查用戶名"
?OnClick
="btnVerify_Click"
></
asp:button
>
<
br
>
<
asp:label?
id
="lblMessage"
?runat
="server"
?ForeColor
="Tomato"
></
asp:label
>
</
form
>
??? 下面轉到代碼視圖下去寫btnVerify的單擊事件方法:
???? 運行這個程序頁面,當我門點擊按扭的時候,提交表單并且頁面刷新。下面是運行后的界面圖:
-----------------------------------------------------------------------------------------------------------
二. Ajax驗證方式
??? 上面的實例展示了傳統的驗證方式的過程,原理是用的表單提交同步的方法執行的。下面我們來看看Ajax的驗證方式與傳統的驗證方式有什么不同,在 上一篇文章 中講到XmlHttpRequest對象的異步請求實現Ajax功能。接下來還是通過一個使用XmlHttpRequest對象的實例來說明Ajax驗證方法的過程。
????在上面建立的ASP.NET項目里新建立一個一般處理程序文件,命名為:AjaxHandler.ashx,同上在里面定義一個模擬數據字典的方法用來檢測用戶名是否存在IsUsernameExist(string strUsername)和一個驗證數據合法性的方法IsValidUsername(string strUsername);詳細定義如下:
??? IsUsernameExist()方法的詳細定義:
???? IsValidUsername()方法的詳細定義:
?????? 見于Ajax的運行步驟:創建對象---發送請求---響應請求---處理返回數據。
????? 下面我們來看看客戶端JavaScript方法的定義,第一篇文章里我提過,要使用一個對象事先得創建一個對象的實例吧,在這里又將使用到XmlHttpRequest對象,所以我門先來定義一個方法創建XmlHttpRequest對象:
?????? 定義一個向服務器發送請求的方法;
?????? 到這里通過分析上面的方法,已經創建好了XmlHttpRequest對,并定義好了向服務器發送請求的方法,指定了想AjaxHandler.ashax發起請求并傳遞一個參數給服務器端。那服務器是怎么處理這個請求的呢?下面我們來看看服務器端的處理過程的定義,在一般處理程序里,當請求發送給他過后是通過其內的一個叫 ProcessRequest ()?的方法來處理的,那么在這里我門要處理客戶端發送過來的請求,是不是就應該修改ProcessRequest()方法的實現呢?答案是肯定的,如下:
?????? 分析上面代碼,如果用戶名不合法則返回1,如果存在則返回2,否則返回0,那么客戶端的處理返回該怎么去定義呢?很顯然是依賴于服務器端返回的這些數據了。客戶端回調方法的詳細定義如下:
????? 到這里客戶端方法和服務器處理程序都OK了,下面我門在客戶段來調用方法向服務器發送請求看看效果:
<
form?
id
="form1"
?runat
="server"
>
????
<
asp:Label?
id
="Label2"
?runat
="server"
?Font-Names
="黑體,Arial?Black"
?Font-Bold
="True"
?Font-Size
="X-Large"
>
???????基于AJAX的數據驗證
</
asp:Label
>
????
<
hr
>
????
<
asp:Label?
id
="Label1"
?runat
="server"
>
用戶名:
</
asp:Label
>
????
<
input?
id
="tbUsername"
?type
="text"
?onkeyup
="CheckUsername(this.value)"
/>
????
<
br
>
????
<
div?
id
="msg"
></
div
>
????
</
form
>
?????? 運行結果如下所示:
本文實例源代碼下載
????
一. 傳統的驗證方式
???? 在傳統的驗證中是采用同步表單提交的方法來處理的驗證請求。這種驗證方式的缺點很顯然而知了。表單提交一是傳輸的數據量比較大消耗資源,二是頁面處于同步方式隨著表單的提交會刷新頁面。下面我看來看看一個簡單的傳統驗證的實例:
??? 建議一個ASP.NET項目,將默認頁面改名為: TraditValidation.aspx ,在頁面.cs里定義一個模擬數據的方法如下:
?1
///
?
<summary>
?2
///
?模擬一個數據字典.判斷用戶名是否存在
?3
///
?
</summary>
?4
///
?
<param?name="strUsername"></param>
?5
///
?
<returns></returns>
?6
private
?
bool
?IsUsernameExist(
string
?strUsername)
?7
{
?8
???
bool
?bRet?
=
?
false
;
?9
10
???
switch
?(strUsername.ToLower())
11
???
{
12
??????
case
?
"
beniao
"
:
13
??????
case
?
"
java
"
:
14
??????
case
?
"
admin
"
:
15
??????
case
?
"
ajax
"
:
16
??????
case
?
"
aspnet
"
:
17
??????bRet?
=
?
true
;?
break
;
18
????}
19
????
return
?bRet;
20
}
???? 接下來轉到
TraditValidation.aspx的html視圖下,定義一個JavaScript方法來驗證輸入數據的合法性。

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

13

14

15

16

17

18

19

20



















??? 轉到設計視圖,給頁面上放置兩個Lebal,一個TextBox,一個Button控件并適當的設置屬性,html代碼如下:









?1
protected
?
void
?btnVerify_Click(
object
?sender,?EventArgs?e)
?2
{
?3
????
if
?(IsUsernameExist(tbUsername.Text))
?4
????
{
?5
????????lblMessage.Text?
=
?
"
用戶名存在!
"
;
?6
????????lblMessage.ForeColor?
=
?Color.Green;
?7
????}
?8
????
else
?9
????
{
10
????????lblMessage.Text?
=
?
"
用戶名不存在!
"
;
11
????????lblMessage.ForeColor?
=
?Color.Red;
12
????}
13
}

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

13

???? 運行這個程序頁面,當我門點擊按扭的時候,提交表單并且頁面刷新。下面是運行后的界面圖:

-----------------------------------------------------------------------------------------------------------
二. Ajax驗證方式
??? 上面的實例展示了傳統的驗證方式的過程,原理是用的表單提交同步的方法執行的。下面我們來看看Ajax的驗證方式與傳統的驗證方式有什么不同,在 上一篇文章 中講到XmlHttpRequest對象的異步請求實現Ajax功能。接下來還是通過一個使用XmlHttpRequest對象的實例來說明Ajax驗證方法的過程。
????在上面建立的ASP.NET項目里新建立一個一般處理程序文件,命名為:AjaxHandler.ashx,同上在里面定義一個模擬數據字典的方法用來檢測用戶名是否存在IsUsernameExist(string strUsername)和一個驗證數據合法性的方法IsValidUsername(string strUsername);詳細定義如下:
??? IsUsernameExist()方法的詳細定義:
?1
///
?
<summary>
?2
????
///
?模擬一個數據字典.判斷用戶名是否存在
?3
????
///
?
</summary>
?4
????
///
?
<param?name="strUsername"></param>
?5
????
///
?
<returns></returns>
?6
????
private
?
bool
?IsUsernameExist(
string
?strUsername)
?7
????
{
?8
????????
bool
?bRet?
=
?
false
;
?9
????????
//
在實際的項目應用中下面就可以去執行數據庫查詢進行驗證
10
????????
switch
?(strUsername.ToLower())
11
????????
{
12
????????????
case
?
"
beniao
"
:
13
????????????
case
?
"
java
"
:
14
????????????
case
?
"
admin
"
:
15
????????????
case
?
"
ajax
"
:
16
????????????
case
?
"
aspnet
"
:
17
????????????????bRet?
=
?
true
;?
break
;
18
????????}
19
????????
return
?bRet;
20
????}

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

13

14

15

16

17

18

19

20

???? IsValidUsername()方法的詳細定義:
1
///
?
<summary>
2
????
///
?驗證字符串是否是3-15位
3
????
///
?
</summary>
4
????
///
?
<param?name="strUsername"></param>
5
????
///
?
<returns></returns>
6
????
private
?
bool
?IsValidUsername(
string
?strUsername)
7
????
{
8
????????
return
?(System.Text.RegularExpressions.Regex.IsMatch(strUsername,?
@"
^(\w{3,15})$
"
));
9
????}

2

3

4

5

6

7

8

9

?????? 見于Ajax的運行步驟:創建對象---發送請求---響應請求---處理返回數據。
????? 下面我們來看看客戶端JavaScript方法的定義,第一篇文章里我提過,要使用一個對象事先得創建一個對象的實例吧,在這里又將使用到XmlHttpRequest對象,所以我門先來定義一個方法創建XmlHttpRequest對象:
?1
????
var
?xmlHttp;
?2
????
function
?createXMLHttpRequest()
?3
????
{
?4
????????
if
(window.ActiveXObject)
?5
????????
{
?6
????????????xmlHttp?
=
?
new
?ActiveXObject(
"
Microsoft.XMLHTTP
"
);
?7
????????}
?8
????????
else
?
if
(window.XMLHttpRequest)
?9
????????
{
10
????????????xmlHttp?
=
?
new
?XMLHttpRequest();
11
????????}
12
????}

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

?????? 定義一個向服務器發送請求的方法;
?1
????
//
處理方法
?2
????
function
?CheckUsername()
?3
????
{
?4
????????createXMLHttpRequest();
?5
????????
var
?strName
=
document.getElementById(
"
tbUsername
"
).value;
?6
????????
var
?url
=
?
"
AjaxHandler.ashx?strUsername=
"
+
strName;
?7
????????xmlHttp.open(
"
GET
"
,url,
true
);
?8
????????xmlHttp.onreadystatechange
=
ShowResult;
?9
????????xmlHttp.send(
null
);
10
????}
?????

?2

?3

?4

?5

?6

?7

?8

?9

10

?????? 到這里通過分析上面的方法,已經創建好了XmlHttpRequest對,并定義好了向服務器發送請求的方法,指定了想AjaxHandler.ashax發起請求并傳遞一個參數給服務器端。那服務器是怎么處理這個請求的呢?下面我們來看看服務器端的處理過程的定義,在一般處理程序里,當請求發送給他過后是通過其內的一個叫 ProcessRequest ()?的方法來處理的,那么在這里我門要處理客戶端發送過來的請求,是不是就應該修改ProcessRequest()方法的實現呢?答案是肯定的,如下:
?1
????
public
?
void
?ProcessRequest?(HttpContext?context)?
?2
????
{
?3
????????context.Response.ContentType?
=
?
"
text/plain
"
;
?4
????????
string
?flag?
=
?
string
.Empty;
?5
????????
string
?strUsername?
=
?context.Request.QueryString[
0
];
?6
????????
if
?(
!
IsValidUsername(strUsername))
?7
????????
{
?8
????????????flag?
=
??
"
1
"
;
?9
????????}
10
????????
else
?
if
?(
!
IsUsernameExist(strUsername))
11
????????
{
12
????????????flag?
=
?
"
2
"
;
13
????????}
14
????????
else
15
????????
{
16
????????????flag?
=
?
"
0
"
;
17
????????}
18
????????context.Response.Write(flag);
19
????}

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

13

14

15

16

17

18

19

?????? 分析上面代碼,如果用戶名不合法則返回1,如果存在則返回2,否則返回0,那么客戶端的處理返回該怎么去定義呢?很顯然是依賴于服務器端返回的這些數據了。客戶端回調方法的詳細定義如下:
?1
//
回調方法
?2
function?ShowResult()
?3
{
?4
???
if
(xmlHttp.readyState
==
4
)
?5
???
{
?6
???????
if
(xmlHttp.status
==
200
)
?7
????????
{
?8
???????????var?bRet?
=
?xmlHttp.responseText;
?9
???????
if
?(bRet?
==
?
"
0
"
)
10
???????
{
11
??????????msg.innerHTML?
=
?
'
用戶名存在!
'
;
12
??????????msg.style.color?
=
?
'
green
'
;
13
???????}
14
???????
else
?
if
?(bRet?
==
?
"
1
"
)
15
???????
{
16
??????????msg.innerHTML?
=
?
'
用戶名長度必須在3到15之間,且不包含字母、數字和下劃線以外的字符!
'
;
17
??????????????msg.style.color?
=
?
'
red
'
;
18
???????}
19
???????
else
20
???????
{
21
?????????msg.innerHTML?
=
?
'
用戶名不存在!
'
;
22
?????????msg.style.color?
=
?
'
red
'
;
23
???????}
????????????
24
???????}
25
???}
26
}

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

????? 到這里客戶端方法和服務器處理程序都OK了,下面我門在客戶段來調用方法向服務器發送請求看看效果:










?????? 運行結果如下所示:

本文實例源代碼下載
????
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
