|
首先在Home/Controller下创建一个公共控制器PublicController
2 x" t* b9 L0 `+ F9 |- <?php
/ n9 N2 X& p- q: B2 {0 v' s2 V$ P9 f6 S. A - namespace Home\Controller;
8 e* ^ e$ O( Q+ X, q9 g0 r - . Q" u: k$ R" s& ^& [' ?
- use Think\Controller;
3 l0 ?7 O: T1 r- y1 R - use Think\Verify;
0 b, W: b1 z. {. x- O" Q) B - % E. \% c3 M# ~/ x: i- @) q: u
- class PublicController extends Controller8 s) D$ W% R, F% v1 W
- {
3 q& m) O9 \0 K - * h' b& b1 Q$ V3 u3 e/ A' ]* R3 f
- /* 生成验证码 */
% |7 U+ g2 V9 d3 T l }; z - public function verify()3 V% h: {' B! X: w& Y8 y
- {
3 r0 Y, d' w2 E: U2 V3 ] - $config = [2 D1 q+ y d) ^0 t# d+ y
- 'fontSize' => 19, // 验证码字体大小5 a: ^8 Z+ f+ R4 e4 B
- 'length' => 4, // 验证码位数
4 f7 M) V; c6 U/ p; p( s - 'imageH' => 34; n6 Q6 |# w7 Q) C* Q
- ];
) G$ p1 G6 u7 c1 ]' }$ M - $Verify = new Verify($config);8 I6 M' Z, c+ T; q& I
- $Verify->entry();: D% t1 B0 A2 ~2 m
- }
! T2 E/ i& w8 q% l9 A
! E2 m4 Z/ j: | j/ c( W- /* 验证码校验 */1 n& c. m( O+ n9 E0 p7 g
- public function check_verify($code, $id = '')6 A# ?; }3 l2 x- n( ~+ N
- {) w* ^" w6 {6 Q, @: z
- $verify = new \Think\Verify();
/ Y/ k, W+ x, |: K - $res = $verify->check($code, $id);$ E0 I9 `, R* [4 J+ }8 D
- $this->ajaxReturn($res, 'json');
9 e2 _+ i: Y) ^$ S/ _ - }
* x( k4 I' D4 a+ H) D2 ]" E - }
复制代码 ) d5 O- |2 K4 S/ t+ n7 J( O4 \
' b9 _$ f, q" i) ^verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。
3 P) l* N3 F' ~3 k, _6 E# tcheck_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
; Q6 Y M% u4 {! g( V u前台模板页建立index.html1 a( T$ R& j# r b) u$ h
- <div class="">8 e% M. E' P) u0 D) C
- <label for="j_verify" class="t">验证码:</label> <input id="j_verify"$ T8 I' A0 P3 R2 I" K
- name="j_verify" type="text" class="form-control x164 in">$ d) ^" L8 \0 F0 O% I2 V
- <img id="verify_img" alt="点击更换" title="点击更换"6 D7 @+ E, L+ r: ~7 e. h
- src="{:U('public/verify',array())}" class="m">' d1 Q" N0 P6 m$ L# D$ ]
- </div>
复制代码
% ^8 J5 J( M' m3 W. q使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
; V' F# S, V! Y. M, d - var verifyURL = "public/verify";
& p5 u; {- T; S: I' R5 E+ t - var time = new Date().getTime();4 J1 V; }0 \, {4 O p5 c3 d
- $("#verify_img").attr({
@# r# H* k" D7 E) `; x# i; Z - "src" : verifyURL + "/" + time% ^) H& i/ C7 A6 o) w, i" F
- });
9 z& D# ]& a. ^" l - });
复制代码
1 M; t4 S! J0 P. x: ^1 _利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:
# y7 ^$ D# o4 }+ W$ p- $("#j_verify").keyup(function() {* x5 e: P+ E1 z- o% @
- $.post("public/check_verify", {! U0 x# _' c; l
- code : $("#j_verify").val()
; J5 D3 D1 K$ k8 `% t ? - }, function(data) {; [; p( ^" c1 S, J# w* T% D
- if (data == true) {
3 b% I8 z+ m9 d# Y - //验证码输入正确8 }4 L4 r/ ~2 P: i* g7 O/ |6 \
- } else {0 C1 L" R9 h" {& F8 v8 \
- //验证码输入错误
( J7 \ i6 l, W) X. H7 P! f5 H - }
' a! k: c3 t$ S: @5 t - });
5 @2 K; X; m# ] - });
复制代码 ! j' u0 c& U8 E2 \6 `1 f
利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array() Z6 b: L* |8 E) p- e: S
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥" _& H" n3 v4 O4 }- ~' }
- 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
+ L$ l( Z8 Q, X# d8 o - 'expire' => 1800, // 验证码过期时间(s)
$ W6 L' c) D/ Z! O. t. f - 'useZh' => false, // 使用中文验证码
- j+ o+ o5 x9 j4 x. ? - 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串, J Z6 y- I2 M) o" z
- 'useImgBg' => false, // 使用背景图片
$ p6 m& }; y8 B) m - 'fontSize' => 25, // 验证码字体大小(px)1 G. ]; B4 [ \3 _( P( G: |# x
- 'useCurve' => false, // 是否画混淆曲线
7 a5 a/ j# S$ x: u - 'useNoise' => false, // 是否添加杂点 $ g$ O) C( P. v8 o# X. \
- 'imageH' => 0, // 验证码图片高度$ U1 y; Q4 K5 v6 m' s- y T
- 'imageW' => 0, // 验证码图片宽度
- d6 {. V/ e8 I4 w: d. S1 ?$ v% J - 'length' => 5, // 验证码位数
5 s' I/ E8 a1 O: D7 j# } - 'fontttf' => '', // 验证码字体,不设置随机获取
/ n0 U& B3 ]1 |- v. n, z - 'bg' => array(243, 251, 254), // 背景颜色& G- D' m! T' V
- 'reset' => true, // 验证成功后是否重置
0 ?) M2 \/ I9 q8 A- h w - );
复制代码
6 d- F% G: ~6 J8 N# D) J; W. n" J请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
" o7 b. _ Z, n3 L. K |