ThinkPHP3.2.3 Verification code display and refresh and checksum

This article mainly introduces the ThinkPHP3.2.3 verification code display, refresh, calibration, with a certain reference value, interested in small partners can refer to.

ThinkPHP3.2.3 Verification code display, refresh, check, as follows:

Show Verification Code

First create a public controller under Home/controller Publiccontroller

<?phpnamespace home\controller;use think\controller;use think\verify;class Publiccontroller extends Controller{  /* Generate Verification Code */Public  function verify ()  {    $config = [      ' fontSize ' = + 19,//captcha font size      ' length ' => ; 4,//Verify number of code digits      ' Imageh ' = +    ;    $Verify = new Verify ($config);    $Verify->entry ();  }  /* Verify Code Check *  /Public Function check_verify ($code, $id = ')  {    $verify = new \think\verify ();    $res = $verify->check ($code, $id);    $this->ajaxreturn ($res, ' json ');}  }

The Verify function is used to generate a verification code, which is used to configure the properties of the display verification code. What are the configurable items for this property, you can view the thinkphp/library/think/verify.class.php file, which is not mentioned here.

The Check_verify function is used to verify the correctness of the verification code. The template post user fills in the verification code to the function, and returns $RES==TRUE validation by false to verify the failure.
Foreground template Page Build index.html

<p class= "" > <label for= "j_verify" class= "T" > Captcha:</label> <input id= "j_verify" name= "J_verify" Type= "text" class= "Form-control x in" >  </p>

Use the thinkphp U method to form a picture that generates a verification code.

Click Refresh Verification Code

From the above to generate a link to the verification code, we can see that the domain name/public/verify can generate a verification code. thinkphp Verification Code Generation mechanism is, if we need to generate a new verification code, after the link to add a variable value.

We can consider the form URL that implements the value of the public/verify/variable.

$ ("#verify_img"). Click (function () {  var verifyurl = "Public/verify";  var time = new Date (). GetTime ();  $ ("#verify_img"). attr ({   "src": Verifyurl + "/" + Time  });});

Use JS to get the current timestamp after adding to the URL.

Here we can realize the click Refresh function of verification code. Concrete manifestation of the form, self-free ha.

Asynchronous checksum verification Code

We must have seen some Web sites, when we enter the verification code, the input process after the text box has been displayed error, until we enter the fight will first prompt the correct form of the code. The following code can be implemented:

$ ("#j_verify"). KeyUp (function () {  $.post ("Public/check_verify", {    code: $ ("#j_verify"). Val ()    }, function (data) {    if (data = True) {      //Verify code entered correctly    } else {      //code input Error    }  });

Use Onekeyup. The principle does not need to speak more!

So that we can implement the user name password before submitting a verification code check, after the form is submitted and then check again, improve the user experience!

It's not over yet:

When we take the above form to achieve the verification code two check, the first time the asynchronous verification will be successful, but the submission of the form is prompted to verify the wrong code! In fact, the reason is still on the thinkphp Verify.class.php:

The following is the initial config configuration for this class:

protected $config =  Array (    ' sekey ' = '   thinkphp.cn ',  //CAPTCHA encryption key    ' codeset '  = ' = ' 2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY ',       //captcha Character set    with ' expire '  = 1800,      // Verification code expiry time (s)    ' Usezh ' +   false,      //Use Chinese captcha     ' zhset '   = ' ... This is not pasted here, too much! ',//       Chinese captcha string    ' USEIMGBG ' + false,      //Use background image     ' fontSize ' + +,       //Captcha font size (px)    ' Usecurve ' = False,/      /whether to draw the confusion curve    ' usenoise ' and false,      //whether to add a miscellaneous dot      ' Imageh ' +  0,        / /captcha Image Height    ' imagew ' +  0,        //captcha image width    ' length '  = 5,        //Verify code number    ' Fontttf ' +  = ',       //Captcha font, not set random get    ' bg '    = = Array (243, 251, 254),//Background color    ' reset '   = True,      //Verify if the Reset is successful    );

Please note that the last property, reset, indicates whether the verification code is reset after successful validation. I believe we all understand, we do the first check pass, in fact, the verification code has been invalidated, but because we are taking an asynchronous check, the page is not refreshed, resulting in the second application of the check and the system has been generated is not the same. So if you like the two-check style, consider configuring reset to False.

OK, the verification code problem based on Thinkphp3.2.3 is summed up here today. Just about to say a bit about the implementation method, the specific content also please refer to the official TP manual. If there is any mistake, you are welcome to point out.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!