cncml手绘网

标题: 验证码第一次异步校验成功，二次失败问题解决 [打印本页]
作者: admin    时间: 2018-7-30 17:12
标题: 验证码第一次异步校验成功，二次失败问题解决
首先在Home/Controller下创建一个公共控制器PublicController

; O! _! u6 X7 A- B
  1. <?php0 Y. D# o( K" z" g, J1 v
  2. namespace Home\Controller;
    6 f- T1 ]6 T* C& w# y% n0 e/ Y: q

  3. 1 c" q8 x/ ^7 a8 C8 T
  4. use Think\Controller;
    " f( R7 U# g- W! g) e! H5 s4 f
  5. use Think\Verify;( R1 Z, b. D& H
  6. 0 Q1 q2 b/ _. M* c8 D) e4 D8 z
  7. class PublicController extends Controller5 }  n6 R0 b4 c1 v
  8. {
    / X. V2 T' k- X0 u

  9. + Y4 B- O4 y8 y
  10. /* 生成验证码 */
    ) P& {/ o8 y% `  V3 |; o; R
  11. public function verify(): m1 d7 Q, Q, J; y: X; t/ L* A
  12. {+ w( B1 U+ u- x* j' e
  13. $config = [9 ]0 F7 u- |  f% N' L  d
  14. 'fontSize' => 19, // 验证码字体大小
    & I: K) p8 H. O: V
  15. 'length' => 4, // 验证码位数5 w: [) Z: W" ?* U" X
  16. 'imageH' => 34' J) @. N/ ^& ]# t* J# s6 A, W
  17. ];& H2 Z/ p1 P! A6 d# I( u
  18. $Verify = new Verify($config);
    3 a; g; y' l" K
  19. $Verify->entry();
    ; I0 N8 M7 u: }9 c) C% W. E
  20. }" a. Q: Q* P, J& r" |
  21. 4 [6 m. [, E4 u
  22. /* 验证码校验 */
    & m  U$ ~4 M" }- J! n. l( D
  23. public function check_verify($code, $id = '')* n. J+ G2 R1 C- T' g
  24. {6 ]; R1 B/ w& ?. O. U# Q" K
  25. $verify = new \Think\Verify();
    9 I* p: D/ z. s% I" T7 q
  26. $res = $verify->check($code, $id);2 B( l% O1 V, F/ R. o0 p
  27. $this->ajaxReturn($res, 'json');
    4 E5 j- d, C4 r& E, ^
  28. }
    8 Y( w( S# D4 P& I8 g1 d
  29. }
复制代码
0 U! h* f" f& g% X6 f% M2 d

6 g0 s& \8 W1 w2 Q" \' C1 uverify函数用于生成验证码，config是用来配置显示验证码的属性。该属性有哪些可配置项，可以查看Thinkphp/Library/Think/Verify.class.php文件，此处不再赘述。
" M; X$ N+ R+ E% h$ H  X! ocheck_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数，返回$res==true验证通过false验证失败。
+ G$ ?2 L' M# K( l9 l前台模板页建立index.html
; Y1 O- @1 h/ Y# l9 n! B
  1. <div class="">
    ( g1 Y2 h4 {1 O
  2. <label for="j_verify" class="t">验证码：</label> <input id="j_verify"
    ! n& W5 I7 |7 h  p/ e' o' t1 y
  3. name="j_verify" type="text" class="form-control x164 in">
    ( t  R  i2 Q. @9 D6 f# s. h% i
  4. <img id="verify_img" alt="点击更换" title="点击更换", N3 A* q% h% r& s1 `( y
  5. src="{:U('public/verify',array())}" class="m">
    : Q9 @$ U- T# X' h
  6. </div>
复制代码
! J$ ?# f5 @9 Y/ L8 I! r% ]
使用Thinkphp的U方法形成生成验证码的图片。
到此验证码即可正常显示。点击刷新验证码
从上面产生验证码的链接我们可以看出，域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是，如若我们需要产生新的验证码，在该链接后加入一个变量值即可。
我们可以考虑实现public/verify/变量值的形式URL。
  1. $("#verify_img").click(function() {
    5 f0 S7 b% ?/ n* T
  2. var verifyURL = "public/verify";* s+ S% c& F/ M% u3 B6 v. v7 ~0 G4 e
  3. var time = new Date().getTime();+ \7 P1 n5 v/ J2 |8 _+ O
  4. $("#verify_img").attr({6 [& A9 U  t, r1 y/ I2 p# z
  5. "src" : verifyURL + "/" + time
    ' s# l' p3 S; T0 u" u6 a6 a
  6. });& w9 ]! H0 d0 O' o, i6 U* Y; [: I
  7. });
复制代码

" S/ k; n7 V  v  N7 n
利用JS获取当前时间戳加入到URL之后即可。
到此我们即可实现验证码的点击刷新功能。具体表现形式，自己随意哈。
异步校验验证码
大家一定见过在某些网站，我们输入验证码的时候，输入的过程中文本框后面一直显示错误，直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现：
' d# Q/ \- d+ D% |1 U& ~2 g% }7 ^
  1. $("#j_verify").keyup(function() {" @* y5 v: ^0 u& m) X; `3 A* H- H
  2. $.post("public/check_verify", {
    , U0 {  f- h. R5 f- l1 F" p
  3. code : $("#j_verify").val()0 h& u3 d) f$ i. ^
  4. }, function(data) {
    7 q8 Q) n; n3 V4 `, N7 Q. z
  5. if (data == true) {
    # B, M5 P1 Q# Y, |* E; i9 v
  6. //验证码输入正确
    6 [; b& w" E! r' [0 v' ~9 C# ~" D
  7. } else {
    3 h! r# s( j8 B6 Y. I% j5 r
  8. //验证码输入错误) C+ u% e+ d% U# ^
  9. }8 b" N7 C& v1 C" t1 P+ ^; N( B% O
  10. });2 A! R7 x% o6 B2 O/ y+ |" y0 E
  11. });
复制代码

" `) q4 s" A" V/ R" H7 \: ~
利用onekeyup。原理就不需要多讲了吧！
这样我们就可以实现在提交用户名密码之前先进行一次验证码校验，之后表单提交之后再进行一次校验，提升用户体验啦！
还没结束：
当我们采取以上形式实现验证码两次校验的时候，肯定会出现第一次异步校验成功，但是提交表单却提示验证码错误的情况！其实原因还是出在Thinkphp的Verify.class.php上：
以下是该类初始的config配置：
  1. protected $config =    array(
    3 e1 v7 m! Y1 k. ^5 p
  2.         'seKey'     =>  'ThinkPHP.CN',   // 验证码加密密钥
    4 a6 |" N% k4 |0 V4 X" ?- q) M) O
  3.         'codeSet'   =>  '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',             // 验证码字符集合
    * q' [2 z- W* d2 C* R  ^: \6 F
  4.         'expire'    =>  1800,            // 验证码过期时间（s）
    * z* y' |$ H1 n- S  R) k
  5.         'useZh'     =>  false,           // 使用中文验证码 9 f. {% ]) ^1 R. K
  6.         'zhSet'     =>  '……此处不粘贴了，太多了！',              // 中文验证码字符串7 K1 X0 @6 s7 d/ P4 \) m
  7.         'useImgBg'  =>  false,           // 使用背景图片 ' Z* d3 d/ v+ [, u
  8.         'fontSize'  =>  25,              // 验证码字体大小(px)
    6 w6 T' e$ D  G" H
  9.         'useCurve'  =>  false,            // 是否画混淆曲线/ I% l+ ], T' x: u; M7 A& g9 s
  10.         'useNoise'  =>  false,            // 是否添加杂点    3 f, L' t* `7 F4 O' o
  11.         'imageH'    =>  0,               // 验证码图片高度  ^- |9 n# e- ~6 q. m' |
  12.         'imageW'    =>  0,               // 验证码图片宽度
    7 ?/ Z- L; \" S% T
  13.         'length'    =>  5,               // 验证码位数
    / ?+ n6 G; h' ^* Z- N! ^! t# s
  14.         'fontttf'   =>  '',              // 验证码字体，不设置随机获取6 G8 J8 w9 t7 \3 ~8 B! o
  15.         'bg'        =>  array(243, 251, 254),  // 背景颜色7 e0 M. n% `% h/ ]. z
  16.         'reset'     =>  true,           // 验证成功后是否重置, F, w& a7 ^; n- W- }& C4 ?
  17.         );
复制代码
3 ~* S6 G1 {% s4 w# k- C+ q3 w
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧，我们进行第一次校验通过之后，其实该验证码已经失效了，只不过因为我们采取的是异步校验，页面并没有刷新，导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格，可以考虑将reset配置为false即可。
好了，基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法，具体内容还请大家参考TP官方手册。如有错误之处，欢迎大家指出。
. u- C( O% y# j- j7 R* b




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