首先在Home/Controller下创建一个公共控制器PublicController
4 T6 W) j; ]/ M; K" c `, V- <?php; z% V# ]) `( U
- namespace Home\Controller;0 _: l" Y3 i. y( {5 s& ]
- # o/ v; ~) M, V m
- use Think\Controller;
) L: d$ E2 \9 G# D6 \ - use Think\Verify;5 ?0 h1 X/ w+ k
- 5 w8 ^ _; ^0 C/ x% d7 d; J1 Z, p
- class PublicController extends Controller9 T3 l- N3 K% P0 k" i
- {
* a; n: T5 ?8 M2 B: Z* _
k8 C/ m4 S) U' P+ E- r! \% E- /* 生成验证码 */
6 H- ?( y" ]$ [8 b: ^3 |5 X$ L - public function verify()
$ f! S' E2 n% }& D - {
; A. \' t$ T7 F" ~: L - $config = [
% X$ n+ T& V# b - 'fontSize' => 19, // 验证码字体大小+ O) C1 d+ W& w0 d! V2 D N
- 'length' => 4, // 验证码位数, w6 G; X$ p# Z2 G: d7 o! J B
- 'imageH' => 34
$ Y2 c* ]4 h- s* \% _: S! g - ];
; |0 R8 V/ f! R' L: b - $Verify = new Verify($config);
9 ~9 J) T5 l9 H7 g. X& C; V( X - $Verify->entry();/ y5 Y. l4 |$ R% g% T* O, m
- }& J4 _3 @) M& N5 T
- ( E" U. }; x3 l
- /* 验证码校验 */
2 p! ^" `& x4 {+ b# U/ ^/ t - public function check_verify($code, $id = '')
) y: f9 w+ ]* S( t9 H. L& }! g - {, Q" J9 F3 |6 Q8 y4 U4 H5 X! ~
- $verify = new \Think\Verify();- C- U, {& I; Q+ L5 i; S) N
- $res = $verify->check($code, $id);
/ `, l2 |/ v7 L9 Q8 T - $this->ajaxReturn($res, 'json');7 x; z9 p* c! ~: _. ], y
- }3 Y: G* p6 v! B' p; w) i
- }
复制代码 ) x5 e2 s- |0 H' X
7 {- G2 O( X7 u+ T2 k
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。9 g! h$ q- p' p+ V2 x! i5 U P
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
1 t* b* t7 V" U1 S+ }前台模板页建立index.html
5 G1 ?. K: I; T0 u$ ?5 p( m4 _- <div class="">* a U n3 v5 |& B; M
- <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
3 {) L, i/ q+ T; p5 d! K# W - name="j_verify" type="text" class="form-control x164 in">
6 s% v5 W9 C. g7 {' w0 k - <img id="verify_img" alt="点击更换" title="点击更换"4 H; }6 z; l7 i& N e) ]
- src="{:U('public/verify',array())}" class="m">
! q3 d8 L2 X5 Q! f - </div>
复制代码
4 P" h6 w, V* D6 t使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {/ M5 b9 P+ z- ^+ u7 p
- var verifyURL = "public/verify";% C0 ~6 n) C8 x- L$ \0 h
- var time = new Date().getTime();
2 F$ B# D9 I3 x' Y5 i - $("#verify_img").attr({8 K# ]1 e4 p+ R% u/ y
- "src" : verifyURL + "/" + time
Z0 X- i3 t1 s4 y* K - }); f5 c: h0 F' V3 C% {: \0 K9 C$ a* t
- });
复制代码
- L7 X' {3 t$ l利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: 7 b3 c! d6 N A2 N- r* b( A6 e
- $("#j_verify").keyup(function() {$ X" D6 X2 `2 J# v9 a
- $.post("public/check_verify", {
7 s) {" j# \ E/ f, L: Y - code : $("#j_verify").val()" N" O0 B# B" ~5 D8 l: t7 ?
- }, function(data) {
2 p. R0 Q* C$ c8 V M9 K - if (data == true) {
( y* w$ q: L& g - //验证码输入正确
# f! e9 |0 C# ] z2 D- C& ]5 a - } else {
1 Y: ]0 W( o( p9 O3 ?: } - //验证码输入错误/ t6 A8 M/ R6 s7 a* n" T- h$ h, `
- }
% I8 P5 D2 g. ~" t - });
$ d; m* R% X) g& x - });
复制代码 % ?7 ?/ `5 h: i- O2 @
利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(* [! a" Z+ Z0 l/ Z; }: S
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
- }3 X2 Z* E! }3 U z - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
' p- E" T2 k+ L; i - 'expire' => 1800, // 验证码过期时间(s)
% m# Q, f. g( T - 'useZh' => false, // 使用中文验证码
+ F0 d5 h0 M) X: w( ^ - 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串/ b8 ?2 a2 l3 ]/ O
- 'useImgBg' => false, // 使用背景图片
3 j$ i6 C" b. G) [8 r - 'fontSize' => 25, // 验证码字体大小(px)
# } s! d4 `# o - 'useCurve' => false, // 是否画混淆曲线
6 w' g& E d) B7 C" F. n9 b - 'useNoise' => false, // 是否添加杂点 , K v+ q y5 O- l3 b8 q
- 'imageH' => 0, // 验证码图片高度
; K2 F4 R) t! |% {% J# T - 'imageW' => 0, // 验证码图片宽度/ J$ n% v" C1 ~5 p1 e
- 'length' => 5, // 验证码位数* J& X2 P1 K3 r. ~& I) M& o
- 'fontttf' => '', // 验证码字体,不设置随机获取8 x% e3 X" M7 L) s7 c P, H
- 'bg' => array(243, 251, 254), // 背景颜色, Z; v' v4 M& z! i+ a+ K: \1 m
- 'reset' => true, // 验证成功后是否重置
; J- {8 t' Q3 I/ l$ J9 O - );
复制代码 7 q3 ~$ v: e, |9 S9 D
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 / X8 y$ J. P9 m8 T' E s6 E6 z' ]% j H" K
|