Display, refresh and verification of ThinkPHP3.2.3 verification code

This article mainly introduces ThinkPHP3.2.3 verification code display, refresh, and verification. It has certain reference value. Interested friends can refer to it.

ThinkPHP3.2.3 verification code display, refresh, and verification are as follows:

Display verification code

First Create a public controller under Home/Controller PublicController

<?php
namespace Home\Controller;

use Think\Controller;
use Think\Verify;

class PublicController extends Controller
{

  /* 生成验证码 */
  public function verify()
  {
    $config = [
      &#39;fontSize&#39; => 19, // 验证码字体大小
      &#39;length&#39; => 4, // 验证码位数
      &#39;imageH&#39; => 34
    ];
    $Verify = new Verify($config);
    $Verify->entry();
  }

  /* 验证码校验 */
  public function check_verify($code, $id = &#39;&#39;)
  {
    $verify = new \Think\Verify();
    $res = $verify->check($code, $id);
    $this->ajaxReturn($res, &#39;json&#39;);
  }
}

verify function is used to generate verification codes, and config is used to configure the attributes for displaying verification codes. . For the configurable items of this attribute, you can view the Thinkphp/Library/Think/Verify.class.php file, which will not be described here.

The check_verify function is used to verify the correctness of the verification code. The template posts the verification code filled in by the user to this function, and returns $res==true if the verification passes and false if the verification fails.
Create index.html for the front-end template page

 <p class="">
 <label for="j_verify" class="t">验证码：</label> <input id="j_verify"
 name="j_verify" type="text" class="form-control x in">
 <img class="m lazy"  src="/static/imghwm/default1.png"  data-src="{:U(&#39;public/verify&#39;,array())}"  id="verify_img" alt="点击更换" title="点击更换"
  >
 </p>

Use Thinkphp's U method to form a picture that generates a verification code.

Click to refresh the verification code

From the above link to generate the verification code, we can see that the domain name /public/verify can generate the verification code . Thinkphp's verification code generation mechanism is that if we need to generate a new verification code, just add a variable value after the link.

We can consider implementing the public/verify/variable value form URL.

$("#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 and add it to the URL.

At this point we can implement the click-to-refresh function of the verification code. The specific form of expression is up to you.

Asynchronous verification of verification code

You must have seen that on some websites, when we enter the verification code, the text in the input process An error is always displayed behind the box until we enter the correct form of the verification code. The following code can be achieved:

$("#j_verify").keyup(function() {
  $.post("public/check_verify", {
    code : $("#j_verify").val()
    }, function(data) {
    if (data == true) {
      //验证码输入正确
    } else {
      //验证码输入错误
    }
  });
});

Use onekeyup. There is no need to explain the principle!

In this way, we can perform a verification code verification before submitting the username and password, and then perform verification again after the form is submitted to improve the user experience!

It’s not over yet:

When we adopt the above form to verify the verification code twice, there will definitely be the first asynchronous The verification is successful, but when submitting the form, it prompts an error in the verification code! In fact, the reason lies in Thinkphp's Verify.class.php:

The following is the initial config configuration of this class:

protected $config =  array(
    'seKey'   => 'ThinkPHP.CN',  // 验证码加密密钥
    'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',       // 验证码字符集合
    'expire'  => 1800,      // 验证码过期时间（s）
    'useZh'   => false,      // 使用中文验证码 
    'zhSet'   => '……此处不粘贴了，太多了！',       // 中文验证码字符串
    'useImgBg' => false,      // 使用背景图片 
    'fontSize' => 25,       // 验证码字体大小(px)
    'useCurve' => false,      // 是否画混淆曲线
    'useNoise' => false,      // 是否添加杂点  
    'imageH'  => 0,        // 验证码图片高度
    'imageW'  => 0,        // 验证码图片宽度
    'length'  => 5,        // 验证码位数
    'fontttf'  => '',       // 验证码字体，不设置随机获取
    'bg'    => array(243, 251, 254), // 背景颜色
    'reset'   => true,      // 验证成功后是否重置
    );

Please note that the last attribute reset indicates whether to reset the verification code after successful verification. I believe everyone understands that after we passed the first verification, the verification code actually became invalid. However, because we used asynchronous verification, the page was not refreshed, which resulted in the failure of the second application for verification. The time is no longer the same as what the system produces. So if you like this double verification style, you can consider configuring reset to false.

Okay, the verification code problem based on Thinkphp3.2.3 is summarized here today. I just briefly talked about the implementation method. Please refer to the TP official manual for specific content. If there are any errors, please point them out.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

thinkPHP5.0 framework configuration format, loading, parsing and reading methods

thinkPHP verification Simple implementation method of code

The above is the detailed content of Display, refresh and verification of ThinkPHP3.2.3 verification code. For more information, please follow other related articles on the PHP Chinese website!