Web production verification code function example code

CAPTCHA (CAPTCHA) is the abbreviation of "Completely Automated Public Turing test to tell Computers and Humans Apart". It is a method to distinguish between users and computers. It is also a public fully automatic program for people. It can prevent: malicious cracking of passwords, ticket fraud, forum flooding, and effectively prevents a hacker from using a specific program to violently crack a specific registered user from making continuous login attempts. In fact, using verification codes is a common method for many websites now. We use This function is implemented in a relatively simple way. This question can be generated and judged by a computer, but only a human can answer it. Since computers cannot answer CAPTCHA questions, the user who answers the questions can be considered a human.

The following is an example code for the Web production verification code function. Friends who are interested can take a look

Implementation effect:

Implementation principle:

Generate verification code provided by the background The

interface, each time the front end requests, the back end will generate a verification code image and verification code. The verification code image is sent to the client for display by the client.

Verification code

string Save it in the Session of the backend, and wait for the frontend to request the business interface again and compare it with the verification code string in the session.

Implementation ideas:

1. First, the back-end provides an interface that can produce verification code images

2. The front-end sets the src attribute in img , an interface for requesting verification code generation.

3. Set a click event for img. Every time you click img, the src value will be changed and the src request will be re-requested

4. When doing page interface operations, check whether the entered verification code is correct.

Implementation code:

Front-end:

html:

<p class="centent-top" style=""> 
   <p class="centent-left"><span>*</span>验证码：</p> 
   <input type="text" class="verification-code-input"> 
   <p class="verification-code"><img id="yzm" src="/SchoolRoll/accuser/code/check"></p> 
   <p class="change"><span>看不清？</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">换一张</span></p> 
  </p>

js:

var yzm =document.getElementById("yzm"); 
 var changeImgCode =document.getElementById("changeImgCode"); 
 yzm.onclick=function () { 
  changPin(); 
 } 
 changeImgCode.onclick=function () { 
  changPin(); 
 } 
 // 换验证码 
 function changPin() { 
  $("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random()); 
 }

The above is the detailed content of Web production verification code function example code. For more information, please follow other related articles on the PHP Chinese website!