您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 13648|回复: 0
打印 上一主题 下一主题

[thinkphp学习资料] 验证码第一次异步校验成功,二次失败问题解决

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-30 17:12:10 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
首先在Home/Controller下创建一个公共控制器PublicController

& r( _* ?% O' D7 t
  1. <?php
    $ f  T. l* y7 c/ j- a3 H" b& U
  2. namespace Home\Controller;" r+ h, }. T" p3 R: ^" g: O

  3. 6 G5 Z7 c) M; ^
  4. use Think\Controller;
    : E$ t7 t# F% z: t
  5. use Think\Verify;3 o. z" }2 |4 g3 D" e& [$ n
  6. 7 b' z1 H3 K. g3 X9 \$ Z) q5 q; r
  7. class PublicController extends Controller! j5 ^- Q$ Y+ E3 o/ W# |
  8. {
    & ?5 i- ^. y0 b9 l

  9. ( U2 v, c/ A! u3 Y5 ~$ l0 K5 u# L
  10. /* 生成验证码 */  `0 e" c! w; d' N
  11. public function verify()  a( V4 {4 r$ d& r# {" D% T
  12. {/ u0 Q6 K) Z- O
  13. $config = [
    5 C) F3 Y0 E2 m, ^
  14. 'fontSize' => 19, // 验证码字体大小
    & L" N8 {9 O) l4 o9 d; p* K
  15. 'length' => 4, // 验证码位数
    * v  w& b) T+ O2 x9 X3 F/ I# n% r
  16. 'imageH' => 34) \; X# K2 C) L7 T; N. D9 y8 |* R
  17. ];4 a" u, D' p& i
  18. $Verify = new Verify($config);) p1 j9 T* k; ?! v
  19. $Verify->entry();1 d0 H8 ?& i8 i& \0 C2 d
  20. }/ V( t7 I$ K9 A4 K( q( W, }
  21. / x. [4 Q& u- f8 d, z1 K% x3 c2 e
  22. /* 验证码校验 */
    . b+ Y$ }/ k3 B0 }0 C$ L
  23. public function check_verify($code, $id = '')
    ! \% I0 _. ?9 ?! a% N6 Z' [3 {
  24. {
    " |1 j1 t* H, Z4 j2 }5 s
  25. $verify = new \Think\Verify();5 ~; j- x5 q1 Y+ r8 f; L
  26. $res = $verify->check($code, $id);) X& v. s3 H; n( [7 N' g
  27. $this->ajaxReturn($res, 'json');
    : s& `* U$ K* b, B; G
  28. }
    $ U6 [% o" n$ V$ t* U! @
  29. }
复制代码
: |. D" b& {/ D% t
' E: N# R8 V/ c# h; e0 }. Y
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。
! U9 u4 v, m6 n* \- zcheck_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
& w+ ^2 t4 X! T1 ^前台模板页建立index.html1 `# U; g/ J. i) Q' a
  1. <div class="">( U5 ]5 {+ Z% {" b& e
  2. <label for="j_verify" class="t">验证码:</label> <input id="j_verify"4 i9 s* f. R8 y& h
  3. name="j_verify" type="text" class="form-control x164 in">
    # u' i& _, B: I4 M  X- c
  4. <img id="verify_img" alt="点击更换" title="点击更换"6 o& W, @1 Y5 U0 [4 I, g. u3 k
  5. src="{:U('public/verify',array())}" class="m">
    3 N3 F1 L( x/ M
  6. </div>
复制代码

4 K- V  L. w$ c+ m- }5 `- W7 P
使用Thinkphp的U方法形成生成验证码的图片。
到此验证码即可正常显示。点击刷新验证码
从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。
我们可以考虑实现public/verify/变量值的形式URL。
  1. $("#verify_img").click(function() {
    5 A# l* B" d  n
  2. var verifyURL = "public/verify";
    * c. D& z  u  P
  3. var time = new Date().getTime();# w& @3 u8 r: o
  4. $("#verify_img").attr({: O7 U: ?+ ~7 ?
  5. "src" : verifyURL + "/" + time
    6 T- F+ \! I0 v+ L5 a3 E. g
  6. });, S% w6 c0 I: k- x
  7. });
复制代码

" ]/ }' j/ O3 C# a
利用JS获取当前时间戳加入到URL之后即可。
到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。
异步校验验证码
大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:

! }# O2 Y' ?. r% z
  1. $("#j_verify").keyup(function() {
    # H3 p; J/ O$ X( p+ j6 O
  2. $.post("public/check_verify", {
    & Q3 X$ T! S! G3 \0 R$ F/ N  t
  3. code : $("#j_verify").val()
    0 G5 v* V: ?0 l$ Y
  4. }, function(data) {
    # }* w( B( y6 e* S1 w' r/ U
  5. if (data == true) {
    ' h  w: y- t% s( n) _
  6. //验证码输入正确# G+ `! I/ g2 T4 W6 j8 C
  7. } else {( U& ?9 }  H4 {" Q, ?' X
  8. //验证码输入错误
    : i/ d! d, Z$ A* ], ~, [) p! I
  9. }) |8 f# j: |& U0 i4 P  o( z- j
  10. });1 ]' ?# k. C& P" h( m$ H6 z4 F
  11. });
复制代码
8 |2 I  j3 z1 `0 p4 ]
利用onekeyup。原理就不需要多讲了吧!
这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦!
还没结束:
当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上:
以下是该类初始的config配置:
  1. protected $config =    array(
    ) |+ ~/ g' `! }1 D
  2.         'seKey'     =>  'ThinkPHP.CN',   // 验证码加密密钥# h! \5 n) W% z( M& m
  3.         'codeSet'   =>  '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',             // 验证码字符集合  _2 V" ~4 B. ~0 W2 V. K
  4.         'expire'    =>  1800,            // 验证码过期时间(s)
    * j8 D; R! e! n% D0 U; `( b4 H
  5.         'useZh'     =>  false,           // 使用中文验证码
    $ }+ I+ P' c  t
  6.         'zhSet'     =>  '……此处不粘贴了,太多了!',              // 中文验证码字符串
    4 l* c6 r% ], E
  7.         'useImgBg'  =>  false,           // 使用背景图片
    ) c8 Q+ Q/ v. N4 a7 {- E0 w
  8.         'fontSize'  =>  25,              // 验证码字体大小(px)/ R1 X) V4 @) k. O+ \
  9.         'useCurve'  =>  false,            // 是否画混淆曲线
      E( _, n, B/ k$ y% J
  10.         'useNoise'  =>  false,            // 是否添加杂点   
    ' P8 B0 R' Q- G" J7 L
  11.         'imageH'    =>  0,               // 验证码图片高度; N! B/ j1 v4 J5 C# o
  12.         'imageW'    =>  0,               // 验证码图片宽度
    1 h7 V6 ?" Y- c7 M; c" [3 ~0 m
  13.         'length'    =>  5,               // 验证码位数
      I" D/ g# ^$ q% p3 G, c7 N9 A5 o' |
  14.         'fontttf'   =>  '',              // 验证码字体,不设置随机获取
    : M' ]- ~" r1 M2 g. h9 c% N8 [1 c
  15.         'bg'        =>  array(243, 251, 254),  // 背景颜色9 u. P  L: U6 x, h# {
  16.         'reset'     =>  true,           // 验证成功后是否重置. A8 L0 q4 Y0 z! l4 \
  17.         );
复制代码
5 a2 u$ E/ k8 d# T6 Q# {5 G
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。
好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。

  z3 Q! o) ^2 z* u1 I* M
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 18:59 , Processed in 0.054683 second(s), 19 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!