Use JQuery and s3captche to verify a fruit name _ jquery

The verification codes that you can see when logging on to a variety of websites should be composed of numbers, letters, and Chinese characters. Have you ever seen fruit names and images used to verify that the client is not a robot? First look at an image:

1. Introduction:

S3captcha is a very useful JQuery plug-in that allows you to display images in sequence. It is implemented through php. However, I found it easy to convert it into asp.net and C # code. I made a config configuration file to configure the source and name of the image in the file.

Next, we will introduce the implementation principle of s3captcha,

Shows its implementation mode.
1. The index of the image is generated immediately;
2. assign a series of random data to the index of the image.
3. You can select a random index from the image list.
4. Randomly display the image as a radio box.
It uses JQuery to convert the radio box to the image List.
2. Code:
The first is to disrupt the order of the index array of the image and output it again:

The Code is as follows:

Public static List Shuffle (List Input)
{
List Output = new List ();
Random rnd = new Random ();

Int FIndex;
While (input. Count> 0)
{
FIndex = rnd. Next (0, input. Count );
Output. Add (input [FIndex]);
Input. RemoveAt (FIndex );
}

Input. Clear ();
Input = null;
Rnd = null;

Return output;
}

Use xml as the s3captche configuration file:

The Code is as follows:

Apple, cherry, lemon, pear, strawberry
Apple, Cherry, Lemon, Pear, Strawberry
33
33
Jpg
Fruit

Verify that you are a human not robot, please choose {0}

Code for GetHtmlCode:

The Code is as follows:

Public static string GetHtmlCodes (string PathTo, out int SessionValue)
{
Bool HasValue = false;
If (string. IsNullOrEmpty (Message ))
HasValue = LoadConfig ();
Else
HasValue = true;

If (HasValue)
{
Random Rnd = new Random ();
Int RandomIndex = Rnd. Next (0, IconNames. Length );

List Values = new List ();
For (int I = 0; I <IconNames. Length; I ++)
Values. Add (I );
Values = shuffle (values );

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 [values [I], RandomValues [I],
PathTo + "/icons/" + Folder + "/" +
IconNames [values [I] + "." + Extention,
Width, Height );
}
WriteThis + ="

";
SessionValue = RandomValues [RandomIndex];
Return WriteThis;
}
Else
{
SessionValue =-1;
Return "Invalid data, config file not found ";
}
}

3. Use the ajax Method to Determine the verification information. The pop-up box is as follows:
S3capcha. ashx is used to return html when a request is sent to the server:

The Code is as follows:

Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/html ";

Int USession;
Context. Response. Write (s3capcha. GetHtmlCodes (".../../s3capcha", out USession ));
Context. Session [s3capcha. s3name] = USession;

Context. Response. End ();
}

Verify. ashx file · to implement the verification function:

The Code is as follows:

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 ("Success ");
Else
Context. Response. Write ("Fail ");

Context. Response. End ();
}

Ajax Code implemented by JQuery:

The Code is as follows:

// Javascript codes
$ (Document). ready (function (){
GetCapcha ();
$ ("Form"). bind ('submit ', function (){
$. Ajax ({
Url: 'verify. ashx ',
Type: 'post ',
Data: {'s3capcha ': $ ("input [name = s3capcha]: checked"). val ()},
Cache: false,
Success: function (data ){
Alert (data );
GetCapcha ();
}
});
Return false;
});
});