cncml手绘网

标题: 验证码第一次异步校验成功，二次失败问题解决 [打印本页]
作者: admin    时间: 2018-7-30 17:12
标题: 验证码第一次异步校验成功，二次失败问题解决
首先在Home/Controller下创建一个公共控制器PublicController
* E: L- x0 e7 M2 N. N
  1. <?php3 i: s2 Q5 f9 ~) ^' W
  2. namespace Home\Controller;# Q) Z) L. B) |1 K! t/ Z, J) A2 j

  3. 4 c5 G4 w* u! j2 n3 j% V, w) X: M
  4. use Think\Controller;4 @2 Q% \. i: z
  5. use Think\Verify;
    9 b  `, S) G, P, o

  6. : S. L) {7 I- B/ k& o; ~7 @( G/ S
  7. class PublicController extends Controller' C' h$ d9 L1 t8 w
  8. {
    * I! V( W$ D2 m3 y" }
  9. 8 y3 x- K% C: a* Y  c
  10. /* 生成验证码 */$ k8 S; L6 L) @, o
  11. public function verify()
    * d- c% ?( z$ @0 d1 E
  12. {
    4 O. d' \: V" e
  13. $config = [
      Q) N/ ]2 U. F4 N- I2 P; m
  14. 'fontSize' => 19, // 验证码字体大小
    ! L+ K1 n# [2 x/ h* @/ x
  15. 'length' => 4, // 验证码位数
    2 A- F4 ^, w, O5 f. k
  16. 'imageH' => 34
    6 a0 P, O+ ?; L" _1 _5 o
  17. ];+ U4 |) h, U# G
  18. $Verify = new Verify($config);
    1 q  k7 Y6 Q% l0 d. i( a9 Y
  19. $Verify->entry();8 d' a% Y# _/ K9 c
  20. }
    5 c& p# B6 [) ~2 o( V9 d4 J

  21. . R6 ]+ e* [, S. F* F% L" J- S
  22. /* 验证码校验 */
    . j$ X; i, N$ w, x) v
  23. public function check_verify($code, $id = '')
      x( {1 e. j! {. U7 y# R5 N3 T
  24. {" T# a. [5 v& ^: a, s# G: `; t6 a
  25. $verify = new \Think\Verify();
    ( M5 n9 q3 |: I
  26. $res = $verify->check($code, $id);
      N5 A7 Y  J/ }. J$ J/ }* Y' H
  27. $this->ajaxReturn($res, 'json');  B/ _& J$ C) J; d' C1 a( S5 n
  28. }
    . M" o# {0 h; Q9 A* g! y9 L& f
  29. }
复制代码

) G2 A% r9 x! f0 Y3 T' G$ h- `$ Q  H) t1 \6 ?
verify函数用于生成验证码，config是用来配置显示验证码的属性。该属性有哪些可配置项，可以查看Thinkphp/Library/Think/Verify.class.php文件，此处不再赘述。
% |/ S% M8 p9 j1 K. y7 Ccheck_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数，返回$res==true验证通过false验证失败。
* d8 U! \3 b; a$ m' ^' j+ F前台模板页建立index.html
2 m9 n; G) M0 ]
  1. <div class=""># C; _9 O7 Z. y; b( ?7 R  {
  2. <label for="j_verify" class="t">验证码：</label> <input id="j_verify"
    . g& w( j0 e' y* `# t2 z
  3. name="j_verify" type="text" class="form-control x164 in">
    $ U8 v% Z$ n1 W+ q
  4. <img id="verify_img" alt="点击更换" title="点击更换"
    0 y" E; ?6 X$ E5 ^
  5. src="{:U('public/verify',array())}" class="m">
    6 T, c2 }% K# g0 M# R
  6. </div>
复制代码
* ]. c7 G8 J. S% W7 N% v
使用Thinkphp的U方法形成生成验证码的图片。
到此验证码即可正常显示。点击刷新验证码
从上面产生验证码的链接我们可以看出，域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是，如若我们需要产生新的验证码，在该链接后加入一个变量值即可。
我们可以考虑实现public/verify/变量值的形式URL。
  1. $("#verify_img").click(function() {
    0 ^$ I7 I7 ~( f' ~  i5 c
  2. var verifyURL = "public/verify";: c2 U) S( X4 b+ @7 I
  3. var time = new Date().getTime();% R* W' z" P3 U* f2 A- {' t
  4. $("#verify_img").attr({0 I0 B; R9 t0 v, o# l* k
  5. "src" : verifyURL + "/" + time
    8 l# n. }' T3 z) A3 [3 S" r5 b7 [
  6. });
    8 L  G, U) j8 N& j# M% d: }
  7. });
复制代码
* F' F2 H3 Y6 A9 `4 B  `
利用JS获取当前时间戳加入到URL之后即可。
到此我们即可实现验证码的点击刷新功能。具体表现形式，自己随意哈。
异步校验验证码
大家一定见过在某些网站，我们输入验证码的时候，输入的过程中文本框后面一直显示错误，直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现：
5 l5 N* o' ^* f/ E  y5 F4 O
  1. $("#j_verify").keyup(function() {
    ' t) C/ W1 w$ T4 s' H' \, z; u; \
  2. $.post("public/check_verify", {% u' J7 B/ n- c4 e( I# C! q
  3. code : $("#j_verify").val()
    3 M( f0 q- s8 a4 ]8 C! P3 R
  4. }, function(data) {
    5 |9 I4 I" S8 }, a+ t2 i- P! Q
  5. if (data == true) {
    $ m4 y1 `+ m0 K- d2 i! ^" ~
  6. //验证码输入正确, C; I$ R% r9 @  g
  7. } else {
    & U9 ?# |4 h* M  O1 ~" p
  8. //验证码输入错误7 @  a* c  S6 w# Z% M4 Q' A, e
  9. }
    ) g, O: P3 T2 f8 q$ Q) W
  10. });
      i& i  E6 g$ s4 d: H! i
  11. });
复制代码
) q* i+ T7 k: t) x7 U
利用onekeyup。原理就不需要多讲了吧！
这样我们就可以实现在提交用户名密码之前先进行一次验证码校验，之后表单提交之后再进行一次校验，提升用户体验啦！
还没结束：
当我们采取以上形式实现验证码两次校验的时候，肯定会出现第一次异步校验成功，但是提交表单却提示验证码错误的情况！其实原因还是出在Thinkphp的Verify.class.php上：
以下是该类初始的config配置：
  1. protected $config =    array(
    9 X, }% w  `% _
  2.         'seKey'     =>  'ThinkPHP.CN',   // 验证码加密密钥7 Q, g% L% ]- I& e
  3.         'codeSet'   =>  '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',             // 验证码字符集合
    & x  T/ r% S7 C  K
  4.         'expire'    =>  1800,            // 验证码过期时间（s）; {' Z" \2 n  Q, _' H7 V
  5.         'useZh'     =>  false,           // 使用中文验证码 6 [% C1 s$ N: w( W: h( f) V
  6.         'zhSet'     =>  '……此处不粘贴了，太多了！',              // 中文验证码字符串) A$ S9 p  R- L5 ~$ E
  7.         'useImgBg'  =>  false,           // 使用背景图片 2 [- l! e  h1 o/ y$ d: q% f
  8.         'fontSize'  =>  25,              // 验证码字体大小(px), d8 t8 D, g2 _/ Q
  9.         'useCurve'  =>  false,            // 是否画混淆曲线' M4 K" J, Q$ v! S# |
  10.         'useNoise'  =>  false,            // 是否添加杂点   
    + u2 T" |9 h8 F3 ^2 T
  11.         'imageH'    =>  0,               // 验证码图片高度
    : X6 j& ^, t0 ?* R; ]
  12.         'imageW'    =>  0,               // 验证码图片宽度
    ; m# _' A6 d, |, |
  13.         'length'    =>  5,               // 验证码位数
    % X( U+ X) g3 V6 g
  14.         'fontttf'   =>  '',              // 验证码字体，不设置随机获取
    % l- c- d/ O( D+ d! z
  15.         'bg'        =>  array(243, 251, 254),  // 背景颜色
    ) g5 V3 O$ B5 q* f4 p' j
  16.         'reset'     =>  true,           // 验证成功后是否重置
    - v' G; E$ G8 W( f
  17.         );
复制代码
; b3 m) }! Z& [  V& ?
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧，我们进行第一次校验通过之后，其实该验证码已经失效了，只不过因为我们采取的是异步校验，页面并没有刷新，导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格，可以考虑将reset配置为false即可。
好了，基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法，具体内容还请大家参考TP官方手册。如有错误之处，欢迎大家指出。

! d$ g" S3 m# V( c( [



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2