JQuery と s3captche を使用してフルーツ name_jquery の検証を実装する

まず写真を見てください:

1. はじめに:

s3captcha は画像を連続して表示できる非常に便利な JQuery プラグインです。 phpを通じて実装されます。しかし、それを asp.net と C# コードに変換するのは簡単であることがわかりました。 イメージのソースと名前を設定できるconfig構成ファイルを作成しました。

次に、s3captcha の実装原理を紹介します。

上の図はその実装モードを示しています。
1. 画像のインデックスを即座に生成します。
2. 画像リストからランダムなインデックスを選択できます。 >4. 画像をラジオボックスとしてランダムに表示します。
JQuery を使用してラジオボックスを画像リストに変換します。
2. コード:
まず、画像インデックス配列の順序を変更して再出力します:

コードをコピー コードは次のとおりです:

public static List input)

{
List () ;
ランダム rnd = new Random();

int FIndex;
while (input.Count > 0)
{
FIndex = rnd.Next(0, input.カウント);
output.Add(input[FIndex]);

input.Clear(); 🎜>rnd = null;

出力を返します。


s3captche 設定ファイルとして XML を使用します:




コードをコピー

コードは次のとおりです:

;s3capcha> リンゴ、チェリー、レモン、梨、イチゴ リンゴ、チェリー、レモン、梨、イチゴ

<幅>33

<高さ>
<フォルダ >
あなたがロボットではないことを確認してください。{0}



GetHtmlCodeコード:




コードをコピー

コードは次のとおりです。

public static string GetHtmlCodes(string PathTo , out int SessionValue) { bool HasValue = false if (string.IsNullOrEmpty(Message)) else HasValue = true; 🎜>if (HasValue )

{

Random Rnd = new Random();
int RandomIndex = Rnd.Next(0,IconNames.Length);

List
for(int i = 0; i
values.Add(i); (値);

string WriteThis = "

"
string.Format(Message, "" IconTitles[values[RandomIndex] ]
"") "

";

int[] RandomValues = new int[IconNames.Length];
for (int i = 0) ; i < IconNames.Length; i )
{
RandomValues[i] = Rnd.Next();
WriteThis = string.Format(RowTemplate,
IconTitles[i]], RandomValues[i],
PathTo "/icons/" Folder "/"
IconNames[values[i]] "." 拡張子、
幅、高さ);
WriteThis = "

";
SessionValue = RandomValues[RandomIndex];
return WriteThis; }
else
{
SessionValue = -1;
return "無効なデータ、設定ファイルが見つかりません";
}
}


3. ajax メソッドを使用して検証情報ポップアップ ボックスを実現します:
s3capcha.ashx は、サーバーにリクエストするときに HTML を返すために使用されます:




コードをコピー


コードは次のとおりです。


public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html"; USession;
context.Response.Write(s3capcha.GetHtmlCodes(" ../../s3capcha", out USession)); context.Response.End();
}

verify.ashx ファイルを使用して検証機能を実装します:

コードをコピーします コードは次のとおりです:

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

if (s3capcha.Verify(context.Session[s3capcha.s3name)] ],
context.Request.Form[s3capcha.s3name]))
context.Response.Write("成功");
else
context.Response.Write("失敗"); 🎜>
context.Response.End();
}

JQuery 実装された Ajax コード:

コードをコピー コードは次のとおりです:

//JavaScript コード
$(document).ready(function() {
getCapcha();
$("フォーム") .bind('submit', function() {
$.ajax({
url: 'verify.ashx',
type: 'POST',
data: { 's3capcha': $ ("input[name=s3capcha]:checked").val() }、
キャッシュ: false、
成功: function(data) {
alert(data); 🎜>getCapcha();
}
});
return
});