在ASP.NET下實現數字和字元相混合的驗證碼

javaprogramers發表於2005-05-08
ASP.NET字元
經常在論壇裡看到有問怎麼實現驗證碼的帖子,其實關於驗證碼的文章在CSDN,DEV-CLUB等網站上都有很多,但是很多文章只講訴瞭如何輸出一個隨機生成數字或字元的圖象,當然了,這個是驗證碼的核心了,但是對很多ASP.NET的初學者來說,怎麼使用它生成的圖象又成了一個問題(論壇有不少問這個的),這也是我寫本文的一個原因.
    言歸正傳,關於驗證碼的原理,我就不多說了,大家可以參見其他文章,文末附有完整的例項程式碼,裡面有詳細的註釋,你可以跳過解說文字,直接使用
    首先,我要簡要說說Session和ViewState的用法,因為後面會用到它
       把資料儲存在Session中:Session("key")="test"
       從Session取值:dim testvalue as string=Session("key")
      類似的:
       把資料儲存在ViewState中:ViewState("key")="test"
       從ViewState中取值:dim testvalue as string=ViewState("key")
    關於ViewState的更詳細的資料,你可以參看MSDN的<<ASP.NET ViewState 初探>>一文
      百聞不如一見,有時程式碼本身就比任何解說更有表現力,所以在此就不對程式碼解說太多了,本文實現的驗證碼需要用到兩個檔案:
       gif.aspx           該檔案用於生成驗證碼
       ValidateCode.aspx  該檔案用來測試驗證碼(即如何使用)
   下面給出gif.aspx的完整程式碼:
<%@ import namespace="System"%>
<%@ import namespace="System.io"%>
<%@ import namespace="System.Drawing"%>
<%@ import namespace="System.Drawing.Imaging"%>
<script language="vb" runat="server">
Sub Page_Load(Sender as object,e as eventargs)
    'RndNum是一個自定義函式
    dim VNum as string=RndNum(4)
    Session("VNum")=VNum
    ValidateCode(VNum)
End Sub
'生成圖象驗證碼函式
Sub ValidateCode(VNum)
   Dim Img as System.Drawing.Bitmap
   Dim g as Graphics
   Dim ms as MemoryStream
   dim gheight as integer=Int(Len(VNum)*11.5)
   'gheight為圖片寬度,根據字元長度自動更改圖片寬度
   img=new BitMap(Gheight,20)
   g=Graphics.FromImage(img)
   g.DrawString(VNum,(New Font("Arial",10)),(New SolidBrush(color.blue)),3,3)'在矩形內繪製字串（字串，字型，畫筆顏色，左上x.左上y）
   ms=New MemoryStream()
   img.Save(ms,ImageFormat.Png)
   Response.ClearContent() '需要輸出圖象資訊 要修改HTTP頭
   Response.ContentType="image/Png"
   Response.BinaryWrite(ms.ToArray())
   g.Dispose()
   img.Dispose()
   Response.End()
End Sub
  '--------------------------------------------
  '函式名稱:RndNum
  '函式引數:VcodeNum--設定返回隨機字串的位數
  '函式功能:產生數字和字元混合的隨機字串
  Function RndNum(VcodeNum)
    dim Vchar as string="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,W,X,Y,Z"
    dim VcArray() as string=split(Vchar,",") '將字串生成陣列
    dim VNum as string=""
    dim i as byte
    For i=1 to VcodeNum
      Randomize
      VNum=VNum & VcArray(Int(35*Rnd)) '陣列一般從0開始讀取，所以這裡為35*Rnd
    Next
    Return VNum
  End Function
</script>
那麼又應該如何使用該檔案生成的圖象驗證碼,看這句程式碼:
<asp:Image id="Image1" runat="server" ImageUrl="gif.aspx" />
這就是用來顯示驗證碼的Image控制元件,你可以把它放在任何你喜歡的地方,下面的給出詳細的使用程式碼,你把它儲存為ValidateCode.aspx,並把它和gif.aspx放在同一目錄下,在瀏覽器中開啟ValidateCode.aspx,就可以測試它的效果了:
<script language="vb" Runat="Server">
  Sub Page_Load(Sender as object,e as eventargs)
      dim VNum as string=Session("VNum")
      Session.Abandon()
      ViewState("VNum")=VNum
  End Sub
  '下面的事件程式碼是用來測試驗證碼,可以根據需要更改
  Sub btnSubmit_click(sender as object,e as eventargs)
      '判斷輸入的驗證碼與所給是否相同
      If txtValidateCode.text=Cstr(ViewState("VNum")) then
          lblShow.text="<font color='red'>提示:驗證通過</font>"
      Else
       lblShow.text="所填寫的驗證碼與所給的不符"
      End If
  End Sub
</script>
<html>
<body>
<form runat="server">
  <div align="center">
    <table width="750">
      <!--DWLayoutTable-->
      <tr> 
        <td width="256" height="46">  </td>
        <td width="9"> </td>
        <td width="88"> </td>
        <td width="87"> </td>
        <td width="100"> </td>
        <td width="68"> </td>
        <td width="97"> </td>
      </tr>
      <tr> 
        <td height="21"></td>
        <td></td>
        <td colspan="3" valign="top"><asp:label ID="lblShow" runat="server"></asp:label></td>
        <td> </td>
        <td> </td>
      </tr>
      <tr> 
        <td height="14"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr> 
        <td height="21"> </td>
        <td colspan="2" valign="middle">驗證碼:</td>
        <td valign="top"><asp:Image id="Image1" runat="server" ImageUrl="gif.aspx" /></td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr> 
        <td height="20"> </td>
        <td colspan="2" valign="top">輸入驗證碼:</td>
        <td valign="top"><asp:textbox ID="txtValidateCode" runat="server" TextMode="SingleLine" /></td>
        <td colspan="2" valign="middle"><font color="#FF0000" size="2">*注意:區分大小寫</font></td>
        <td> </td>
      </tr>
      <tr> 
        <td height="25"> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr> 
        <td height="19"> </td>
        <td> </td>
        <td> </td>
        <td valign="top"><asp:button ID="btnSubmit" runat="server" Text="比較" onclick="btnSubmit_click" /></td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
  </div>
</form>
</body>
</html> 

相關文章