jquery plugin implements static HTML verification code checksum _jquery

jquery, created by John Resig of the United States, is a fast, concise JavaScript library that provides a number of traversal functions, such as each (FN). jquery enables the user's HTML page to keep the code and HTML content separate, that is, you don't have to insert a bunch of JS into the HTML to invoke the command, just define the ID. It is these operational features that make it easy for users to handle HTML documents, events, animate effects, and easily interact with the site. Today, jquery has attracted many JavaScript gurus from around the world to join.

The jquery real person Plugin to be mentioned here is a jquery code plug-in that is written entirely from JavaScript.

The jQuery real person plugin mainly implements two kinds of authentication methods, which can effectively prevent the automatic submission of forms. Its appearance provides custom functionality, and the default is 6-bit letters, as shown in Figure 1.

Depending on your needs, you can also customize the 8-bit length of the verification code, as shown in Figure 2.

Or the alphanumeric hybrid verification code, as shown in Figure 3.

In addition, the user can also customize the text at the bottom, as shown in Figure 4.

Can we do this by ourselves when we see these unique and powerful verification interfaces? The answer is yes. The following step-by-step explanation is used to analyze the validation process of the jquery real person plugin.
The 1th step is to introduce JavaScript and CSS files before using this validation feature.

<script type= "Text/javascript" src= "scripts/jquery-1.3.2.js" ></script>
<script type= "text/" JavaScript "src=" scripts/jquery.realperson.js "></script>
<style type=" text/css "> @import" Styles/jquery.realperson.css ";</style>

In the above code, line 1th introduces the jquery class library, which is available on the official web site for the latest jquery class library. Line 2nd introduces the authentication Code plug-in class library jquery.realperson.js. Line 3rd introduces the authentication code style file JQUERY.REALPERSON.CSS. The Web interface is shown in Figure 5.

The 2nd step is to put the text box element in the page, which is the HTML part.

<table>
<tr>
<td><input type= "text" id= "txtvalidate" name= "Defaultreal" ></td >
</tr>
<tr>
<td><asp:button id= "btnsubmit" runat= "server" text= "login"/> </td>
</tr>
</table>

In the above code, the 1th exercise is laid out in two rows, one for the text box, the other for the login button. Line 3rd defines the text box for id= "Txtvalidate", which is used to enter the validation code. Line 6th defines the submit button for id= "Btnsubmit", which triggers a background event to log on to the system.
The 3rd step, when the page is initialized, invokes the Authenticode plug-in to facilitate initialization of the verification code display.

<script>
$ (document). Ready (function () {
$ ("#txtValidate"). Realperson ({length:5});
</script>

In the above code, the action of the 2nd behavior page when loaded is equivalent to the OnLoad event on the page. Line 3rd calls the interface of the validation code control to display the validation code.
The 4th step, core code analysis.

/* Core Code @param target (jQuery) the input field @param Inst (object) The current instance  Settings @return (String) The additional content/_generatehtml:function (target, inst) {var text = '; for (var i = 0; i < inst.settings.length;
 i++) {text + Chars.charat (Math.floor (Math.random () * (inst.settings.includeNumbers? 36:26));}
 var html = ' <div class= ' realperson-challenge ' ><div class= ' realperson-text ' > '; for (var i = 0; i < dots[0].length. i++) {for (var j = 0; J < Text.length; J +) {html = dots[chars.indexof (text
. CharAt (j))][i] + ';
html = = ' \ n '; html + + ' </div><div class= ' Realperson-regen ' > ' + inst.settings.regenerate + ' </div></div> <input type= "hidden" class= "Realperson-hash" ' name= ' + inst.settings.hashName.replace (/\{n\}/, target.attr (' name ')
) + ' "value=" ' + this._hash (text) + ' > ';
return HTML; 

In the above code, line 7th to 9th is used to generate the random character of the captcha. Line 12th to 22nd is used to assemble the background characters and random characters into HTML code and output to the browser.

Through the above analysis, we can see that the verification code is very important for password security. Think of security issues with bank accounts, such as hackers acquiring bank accounts in other ways, and then opening their online banking login interface. Using the browser to view the source code, analysis of the login interface HTML code, found that there is no authentication code in the page, there is no other security settings, only use the HTTP protocol; Hackers are happy, so you can use the program to simulate the browser to the bank server to submit accounts and passwords. Password is generally 6 digits, the correct password is the possibility of 10 of 6, that is 1 million times. Hackers will find a high-performance, high-bandwidth computer, run to get the bank password program, assuming that the computer 1 seconds to test 10 passwords, 100,000 seconds (that is, 27 hours, a day or so) time to run all the password, in fact, the hacker can not take so long to have stolen the password, The money from the bank account will also be diverted away. In other words, if there is no verification code, hackers use the bank password procedures, in a day or so can easily get illegal income.

In practice, Chinese character Verification code is also a common verification code, its principle is: from a collection of Chinese characters randomly selected a few Chinese characters, generate pictures to the HTTP output to the page. If the client enters the correct kanji, you can continue with the operation or prohibit the login. China 5,000 years, the culture is profound, the number of Chinese characters up to more than 90,000, relatively only 10 digits of digital authentication code and 26 characters of the letter verification Code, Chinese character verification code more security. Therefore, through the security of the Verification Code research, you can appreciate the profound Chinese culture, the original password verification can also play!

The above is the entire content of this article, I hope to help you learn.