Affichage, actualisation et vérification du code de vérification ThinkPHP3.2.3

Cet article présente principalement l'affichage, l'actualisation et la vérification du code de vérification ThinkPHP3.2.3. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Affichage, actualisation et vérification du code de vérification ThinkPHP3.2.3, les détails sont les suivants :

Afficher le code de vérification

Premier de tous, créez un contrôleur public sous 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;);
  }
}

la fonction de vérification est utilisée pour générer des codes de vérification, la configuration est utilisée pour configurer l'affichage des propriétés des codes de vérification. Pour les éléments configurables de cet attribut, vous pouvez visualiser le fichier Thinkphp/Library/Think/Verify.class.php, qui ne sera pas décrit ici.

La fonction check_verify est utilisée pour vérifier l'exactitude du code de vérification. Le modèle publie le code de vérification renseigné par l'utilisateur dans cette fonction et renvoie $res==true si la vérification réussit et false si la vérification échoue.
Créez index.html sur la page du modèle frontal

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

Utilisez la méthode U de Thinkphp pour former une image afin de générer le code de vérification.

Cliquez pour actualiser le code de vérification

À partir du lien ci-dessus pour générer le code de vérification, nous pouvons voir que le nom de domaine /public/ verify peut générer le code de vérification. Le mécanisme de génération de code de vérification de Thinkphp est que si nous devons générer un nouveau code de vérification, ajoutez simplement une valeur variable après le lien.

Nous pouvons envisager d'implémenter une URL publique/vérifier/formulaire de valeur variable.

$("#verify_img").click(function() {
  var verifyURL = "public/verify";
  var time = new Date().getTime();
  $("#verify_img").attr({
   "src" : verifyURL + "/" + time
  });
});

Utilisez JS pour obtenir l'horodatage actuel et l'ajouter à l'URL.

À ce stade, nous pouvons implémenter la fonction cliquer pour actualiser le code de vérification. La forme spécifique d’expression dépend de vous.

Vérification asynchrone du code de vérification

Vous avez dû voir cela sur certains sites Web, lorsque nous entrons le code de vérification, le texte dans la saisie processus Une erreur est toujours affichée derrière la boîte jusqu'à ce que nous saisissions la forme correcte du code de vérification. Le code suivant peut être implémenté :

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

Utilisez onekeyup. Inutile d'expliquer le principe !

De cette façon, nous pouvons effectuer une vérification du code de vérification avant de soumettre le nom d'utilisateur et le mot de passe, puis effectuer à nouveau la vérification une fois le formulaire soumis pour améliorer l'expérience utilisateur !

Ce n'est pas encore fini :

Lorsque nous adopterons le formulaire ci-dessus pour vérifier le code de vérification deux fois, il y aura certainement le premier asynchrone Le la vérification est réussie, mais lors de la soumission du formulaire, une erreur dans le code de vérification s'affiche ! En fait, la raison réside dans Verify.class.php de Thinkphp :

Ce qui suit est la configuration initiale de cette classe :

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,      // 验证成功后是否重置
    );

Veuillez noter que la dernière réinitialisation de l'attribut indique s'il faut réinitialiser le code de vérification après une vérification réussie. Je pense que tout le monde comprend qu'après avoir réussi la première vérification, le code de vérification est devenu invalide. Cependant, parce que nous avons utilisé la vérification asynchrone, la page n'a pas été actualisée, ce qui a entraîné l'échec de la deuxième demande de vérification. la même chose que ce que le système produit. Donc, si vous aimez ce style de double vérification, vous pouvez envisager de configurer la réinitialisation sur false.

D'accord, ceci conclut aujourd'hui le problème du code de vérification basé sur Thinkphp3.2.3. Je viens de parler brièvement de la méthode de mise en œuvre. Veuillez vous référer au manuel officiel de TP pour le contenu spécifique. S'il y a des erreurs, veuillez les signaler.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Format de configuration du framework thinkPHP5.0, méthodes de chargement, d'analyse et de lecture

Vérification thinkPHP Implémentation simple méthode de code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!