jQuery plug-in implements static HTML verification code verification_jquery

jQuery was created by American John Resig. It is a fast and concise JavaScript library that provides many traversal functions, such as each(fn). jQuery can keep the code and HTML content of the user's HTML page separated. That is to say, there is no need to insert a bunch of js in the HTML to call the command. You only need to define the id. It is these operational characteristics that allow users to easily process HTML documents, events, implement animation effects, and easily provide interactions for websites. Today, jQuery has attracted many JavaScript experts from all over the world to join.

The jQuery Real Person Plugin we are going to talk about here is a jQuery verification code plug-in written entirely in JavaScript.

jQuery Real Person Plugin mainly implements two verification methods: letters and mixed letters and numbers, which can effectively prevent automatic submission form. Its appearance display provides customization functions. The default is 6-digit letters, as shown in Figure 1.

According to needs, you can also customize an 8-digit verification code, as shown in Figure 2.

Or a mixed alphanumeric verification code, as shown in Figure 3.

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

Seeing these unique and powerful verification interfaces, can we implement them ourselves? The answer is yes. Below, we will analyze the verification process of jQuery Real Person Plugin through step-by-step explanation.
Step 1, before using this verification function, introduce JavaScript and CSS files.

<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 1 introduces the jQuery class library. You can download the latest jQuery class library from the official website. Line 2 introduces the verification code plug-in library jquery.realperson.js. Line 3 introduces the verification code style file jquery.realperson.css. The website interface is shown in Figure 5.

Step 2, put the text box element into 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="登录" /></td>
</tr>
</table>

In the above code, line 1 uses two rows and one column for layout, one row is used to store the text box, and one row is used to store the login button. Line 3 defines the text box with id="txtValidate" for entering the verification code. Line 6 defines the submit button with id="btnSubmit", which is used to trigger background events to log in to the system.
Step 3: When the page is initialized, call the verification code plug-in to initialize the verification code display.

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

In the above code, the second line is the operation performed when the page is loaded, which is equivalent to the onLoad event of the page. Line 3 calls the interface of the verification code control to display the verification code.
Step 4, core code analysis.

/* 核心代码
@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 &#63; 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, lines 7 to 9 are used to generate random characters of the verification code. Lines 12 to 22 are used to assemble background characters and random characters into HTML code and output it to the browser.

Through the above analysis, we can see that verification codes play a very important role in password security. Thinking of bank account security issues, for example, a hacker obtains a bank account through other means and then opens the login interface of its online banking. Use the method of viewing the source code in the browser to analyze the HTML code of the login interface. It is found that there is no verification code and no other security settings in the page. Only the HTTP protocol is used. The hacker is delighted, so he can use a program to simulate the browser's request. The bank server submits the account and password. The password is usually a 6-digit Arabic numeral, and the possibility of a correct password is 10 to the 6th power, which is 1 million times. A hacker will find a high-performance, high-bandwidth computer and run a program to extract bank passwords. Assuming that this computer can test 10 passwords in one second, it will take 100,000 seconds (that is, 27 hours, about a day) Run through all the passwords. In fact, it won't take that long for the hacker to steal the password, and the money in the bank account will be transferred. In other words, if there is no verification code, hackers can easily obtain illegal income in a day or so by using the program to obtain bank passwords.

In practical applications, the Chinese character verification code is also a relatively common verification code. Its principle is: randomly select several Chinese characters from a Chinese character set, generate a picture and stream it to the page through HTTP output. If the client enters correct Chinese characters, the operation can continue, otherwise login is prohibited. China has five thousand years of history, a vast and profound culture, and more than 90,000 Chinese characters. Compared with the 10-digit numerical verification code and the 26-character alphabetical verification code, the Chinese character verification code is more secure. Therefore, through the study of verification code security, we can better appreciate the profoundness of Chinese culture. It turns out that password verification can also be played in this way!

The above is the entire content of this article, I hope it will be helpful to everyone’s study.