Use JQuery and s3captche to verify a fruit name

Source: Internet
Author: User
Tags shuffle

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:
Copy codeThe Code is as follows:
Public static List <int> shuffle (List <int> input)
{
List <int> output = new List <int> ();
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:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<S3capcha>
<Icons>
<Name> apple, cherry, lemon, pear, strawberry </name>
<Title> Apple, Cherry, Lemon, Pear, Strawberry </title>
<Width> 33 </width>
<Height> 33 <Ext> jpg </ext>
<Folder> fruit </folder>
</Icons>
<Message> Verify that you are a human not robot, please choose {0} </message>
</S3capcha>

Code for GetHtmlCode:
Copy codeThe 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 <int> values = new List <int> ();
For (int I = 0; I <IconNames. Length; I ++)
Values. Add (I );
Values = shuffle (values );

String WriteThis = "<div class = \" s3capcha \ "> <p>" +
String. Format (Message, "<strong>" + IconTitles [values [RandomIndex] +
"</Strong>") + "</p> ";

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 + = "<div style =" \ "style =" \ "" clear: left \ "> </div> ";
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:
Copy codeThe 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:
Copy codeThe 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:
Copy codeThe 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;
});
});

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.