接續一上文
二、實作圖形驗證碼控制項
雖然我們可以使用 Image 控制項來呈現 ValidateCode.aspx 頁面產生的驗證碼圖形,可是這樣只處理一半的動作,因為沒有處理「使用者輸入的驗證碼」是否與「圖形驗證碼」相符,所以我們將實作一個圖形驗證碼控制項,來處理掉所有相關動作。
即然上面的示範使用 Image 控制項來呈現驗證碼,所以圖形驗證碼控制項就繼承 Image 命名為 TBValidateCode。
< _
Description("圖形驗證碼控制項"), _
ToolboxData("<{0}:TBValidateCode runat=server></{0}:TBValidateCode>") _
> _
Public Class TBValidateCode
Inherits System.Web.UI.WebControls.Image
End
新增 ValidateCodeUrl 屬性,設定圖形驗證碼產生頁面的網址。
''' <summary>
''' 圖形驗證碼產生頁面網址。
''' </summary>
< _
Description("圖形驗證碼產生頁面網址"), _
DefaultValue("") _
> _
Public Property ValidateCodeUrl() As String
Get
Return FValidateCodeUrl
End Get
Set(ByVal value As String)
FValidateCodeUrl = value
End Set
End Property
覆寫 Render 方法,若未設定 ValidateCodeUrl 屬性,則預設為 ~/Page/ValidateCode.aspx 這個頁面。另外我們在圖形的 ondbclick 加上一段用戶端指令碼,其作用是讓用戶可以滑鼠二下來重新產生一個驗證碼圖形。
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim sUrl As String
Dim sScript As String
sUrl = Me.ValidateCodeUrl
If String.IsNullOrEmpty(sUrl) Then
sUrl = "~/Page/ValidateCode.aspx"
End If
If Me.BorderWidth = Unit.Empty Then
Me.BorderWidth = Unit.Pixel(1)
End If
If Me.AlternateText = String.Empty Then
Me.AlternateText = "圖形驗證碼"
End If
Me.ToolTip = "滑鼠點二下可重新產生驗證碼"
Me.ImageUrl = sUrl
If Not Me.DesignMode Then
sScript = String.Format("this.src='{0}?flag='+Math.random();", Me.Page.ResolveClientUrl(sUrl))
Me.Attributes("ondblclick") = sScript
End If
Me.Style(HtmlTextWriterStyle.Cursor) = "pointer"
MyBase.Render(writer)
End Sub
另外新增一個 ValidateCode 方法,用來檢查輸入驗證碼是否正確。還記得我們在產生驗證碼圖形時,同時把該驗證碼的值寫入 Session("_ValidateCode") 中吧,所以這個方法只是把用戶輸入的值與 Seesion 中的值做比對。
''' <summary>
''' 檢查輸入驗證碼是否正確。
''' </summary>
''' <param name="Code">輸入驗證碼。</param>
''' <returns>驗證成功傳回 True,反之傳回 False。</returns>
Public Function ValidateCode(ByVal Code As String) As Boolean
If Me.Page.Session(SessionKey) Is Nothing Then Return False
If SameText(CCStr(Me.Page.Session(SessionKey)), Code) Then
Return True
Else
Return False
End If
End Function
三、測試程式
在頁面放置一個 TBValidateCode 控制項,另外加一個文字框及按鈕,供使用者輸入驗證碼後按下「確定」鈕後到伺服端做輸入值比對的動作。
<bee:TBValidateCode ID="TBValidateCode1" runat="server" />
<bee:TBTextBox ID="txtCode" runat="server"></bee:TBTextBox>
<bee:TBButton ID="TBButton1" runat="server" Text="確定" />
在「確定」鈕的 Click 事件中,我們使用 TBValidateCode 控制項的 ValidateCode 方法判斷驗證碼輸入的正確性。
Protected Sub TBButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TBButton1.Click
If TBValidateCode1.ValidateCode(txtCode.Text) Then
Me.Response.Write("驗證碼輸入正確")
Else
Me.Response.Write("驗證碼輸入錯誤!")
End If
End Sub
執行程式,頁面就會隨機產生一個驗證碼圖形。
輸入正確的值按「確定」鈕,就會顯示「驗證碼輸入正確」的訊息。因為我們在同一頁面測試的關係,你會發現 PostBack 後驗證碼圖形又會重新產生,一般正常的做法是驗證正確後就導向另一個頁面。
當我們輸入錯誤的值,就會顯示「驗證碼輸入錯誤!」的訊息。
備註:本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/29/5818.aspx