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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

4 e2 ]! p; \! c7 i5 [
  1. <?php
    , H8 n; J; `/ Z' |8 d2 w1 S* H
  2. namespace Home\Controller;
    / ^4 F( I+ w. i$ G) x% {

  3. . g9 H0 m) _: e5 |6 U
  4. use Think\Controller;
    : l" w& X- w8 u" a% Y
  5. use Think\Verify;; J% M# q- p6 i% E

  6. ' C7 J4 J6 I5 b& @: D
  7. class PublicController extends Controller
    ( T1 c4 t# Y% P
  8. {' W& H1 ?# e- ]: s
  9. / q, l; p% l6 m" r9 E. z0 |
  10. /* 生成验证码 */  p( |5 u- Q0 o& S" T) Z
  11. public function verify(), O) s1 n* s9 |
  12. {
    0 r9 h0 ~9 t- C$ M3 h4 d
  13. $config = [
    3 }3 Z$ i, U6 U% S/ ^
  14. 'fontSize' => 19, // 验证码字体大小7 O# L& U9 ^' c2 ?8 _# i0 z" r
  15. 'length' => 4, // 验证码位数
    ! a' q3 B4 @3 C; J( j5 A  Z
  16. 'imageH' => 34
    8 h5 N4 `$ o9 ^- K. n+ b
  17. ];
    - @. f! U$ a$ C" I" h  M; |/ o
  18. $Verify = new Verify($config);
    / k+ s* s/ T+ Y. S: X
  19. $Verify->entry();
    % p' v+ e! d, Q5 ]% ^# V/ u. j
  20. }
    # p# H' O$ T  N0 Q2 f
  21. 5 Y9 l, z1 b: c7 i( i
  22. /* 验证码校验 */  f! ^. L' }) x
  23. public function check_verify($code, $id = '')
    1 ^6 r* {+ J0 V8 _% v- g% I
  24. {, y1 W4 ]+ m* i9 z+ @
  25. $verify = new \Think\Verify();
    % G- Q1 b8 @: d! `
  26. $res = $verify->check($code, $id);
    ' v& ?! u& a* B9 ^! ?3 r& `1 H
  27. $this->ajaxReturn($res, 'json');
    ' f" l) T$ b1 y" m- W
  28. }& B2 q" Y8 A6 r9 Z* a
  29. }
复制代码

. X. o& t  F- k2 M% v0 H8 M1 l# m3 ^$ Y  B, S& ?6 e4 @
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。$ J* l  z0 K7 {
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
  \* k9 g1 P/ I前台模板页建立index.html
* I3 ~9 F+ j5 Q9 Y
  1. <div class="">2 Q" B# ~1 j2 N" K! W" i' h- M% b
  2. <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
    3 {* u+ W, t7 y3 x. o
  3. name="j_verify" type="text" class="form-control x164 in">2 p$ A) {9 N" }, O, \- M; {
  4. <img id="verify_img" alt="点击更换" title="点击更换"' J& A; s# o  ~3 M$ A9 B/ q
  5. src="{:U('public/verify',array())}" class="m">. k1 i, w- w0 w: i2 z( B% F9 j& }8 @
  6. </div>
复制代码
0 |! c1 o% ^# [  m. ^
使用Thinkphp的U方法形成生成验证码的图片。
到此验证码即可正常显示。点击刷新验证码
从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。
我们可以考虑实现public/verify/变量值的形式URL。
  1. $("#verify_img").click(function() {) w' B3 w3 ?9 `  F3 a; m  F
  2. var verifyURL = "public/verify";
    8 I3 d- J+ a7 Q7 [1 }% v; B3 X% s
  3. var time = new Date().getTime();
    : [* u! ?3 ?+ b$ t0 D
  4. $("#verify_img").attr({
    ) h/ C( w4 z$ T  g
  5. "src" : verifyURL + "/" + time1 f+ c0 R# l$ L
  6. });
    ' E+ I3 n' W2 d# I
  7. });
复制代码
' {; o7 f) l  b- e8 p
利用JS获取当前时间戳加入到URL之后即可。
到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。
异步校验验证码
大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:
. Q: f+ s+ O: c  g( A) M9 r
  1. $("#j_verify").keyup(function() {
    * g' W! z( v% i: {( y( B
  2. $.post("public/check_verify", {
    0 O. S4 l6 Y. }5 ?9 L( {
  3. code : $("#j_verify").val()* q0 \/ K! [/ k, c2 f
  4. }, function(data) {! e' T- c/ C2 n5 e
  5. if (data == true) {/ ~2 I5 X  {' @$ e5 S1 k  u
  6. //验证码输入正确
    ; k; {& T+ a' Y6 D. `1 J" z) I( \/ Y
  7. } else {$ |1 v$ j) k+ b; w$ h
  8. //验证码输入错误
    ' C3 p8 o7 E- l" I% D
  9. }
    3 Q. z! T7 U. S6 j3 r% o
  10. });
    2 ~" k! ?" c3 b$ u% t# d, }9 M/ |
  11. });
复制代码

7 x$ [! s6 j6 a& U- k
利用onekeyup。原理就不需要多讲了吧!
这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦!
还没结束:
当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上:
以下是该类初始的config配置:
  1. protected $config =    array(
    , @1 P/ l- b' ?; J
  2.         'seKey'     =>  'ThinkPHP.CN',   // 验证码加密密钥
    ) v) C' P, f1 w! V) t# \
  3.         'codeSet'   =>  '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',             // 验证码字符集合
    ) n" P9 n) W# ^3 ^* ]' [
  4.         'expire'    =>  1800,            // 验证码过期时间(s)
      x& H, a2 b* L! Q! w
  5.         'useZh'     =>  false,           // 使用中文验证码
    6 l7 t: c! E, @# W7 a
  6.         'zhSet'     =>  '……此处不粘贴了,太多了!',              // 中文验证码字符串
    $ V5 R) M( e* O) c
  7.         'useImgBg'  =>  false,           // 使用背景图片
    * w- P" m9 S! X% M
  8.         'fontSize'  =>  25,              // 验证码字体大小(px)6 D& B% H9 k& E: U$ b% K* ^! p6 X1 Y
  9.         'useCurve'  =>  false,            // 是否画混淆曲线9 ~& S- m, g/ _- k( [- G
  10.         'useNoise'  =>  false,            // 是否添加杂点   
    $ C6 q; U& Z; c8 k" x
  11.         'imageH'    =>  0,               // 验证码图片高度
    + X, |. W* X& E7 s: x
  12.         'imageW'    =>  0,               // 验证码图片宽度
    4 \% }4 f. O$ R' ]9 q9 w
  13.         'length'    =>  5,               // 验证码位数
    " d  b( h6 N+ `. {
  14.         'fontttf'   =>  '',              // 验证码字体,不设置随机获取
    ; N, `* C; `/ m. H6 A" G3 f
  15.         'bg'        =>  array(243, 251, 254),  // 背景颜色3 o0 I% Y+ M. O0 p, j0 v
  16.         'reset'     =>  true,           // 验证成功后是否重置
    * d* f( }0 ]  A4 I
  17.         );
复制代码
" V: o: }3 g3 V9 L' K: d
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。
好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
+ ^% y4 Y$ E; T3 t
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-22 20:31 , Processed in 0.109038 second(s), 20 queries .

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