首先在Home/Controller下创建一个公共控制器PublicController 2 r0 j3 m) X. ~
- <?php
2 p1 u7 p- i0 p7 [% H" R - namespace Home\Controller;' g/ p D& C6 n9 ?3 R) R3 ]
, N% [3 N1 ^; ^' b1 i. ~" m- use Think\Controller;. ]6 T( v0 D6 y4 ?. d2 f
- use Think\Verify;5 S0 ]$ r# A- q( F4 K
- & Z) q0 I4 i: V# T
- class PublicController extends Controller0 Z, Q @0 l+ X6 @/ D
- {
, a, h- p# s v+ x - 9 X9 |) P2 u! Z4 P
- /* 生成验证码 */
$ g. q. v2 D4 w - public function verify()( q( ~6 [2 d; o0 M. P
- {( ?; a/ |7 {3 M2 h0 ^
- $config = [
# {# m9 m! F; I8 t/ p! g3 w - 'fontSize' => 19, // 验证码字体大小0 R. Z& ^2 `$ y9 A; \, {8 G S
- 'length' => 4, // 验证码位数& F8 |4 E3 ~$ @: j5 G
- 'imageH' => 34 B5 F- T) F4 h
- ];
# p7 O+ d- i. n! h9 E - $Verify = new Verify($config);
' N9 B- ~9 F, X% e/ H - $Verify->entry();
: C, @. P f( q% }# k - }
4 ]3 {% u' }) J' H9 T- l' g
& ^: W& {+ m( W, x7 X4 h0 K& J$ F: R- /* 验证码校验 */
% W: \' \2 @. t \ - public function check_verify($code, $id = '')
- F u4 B$ Y" V. @; B$ g+ y - {1 R K+ h( Z$ [
- $verify = new \Think\Verify();; o0 r& }9 m* U2 Y' @5 q+ c
- $res = $verify->check($code, $id);# R/ T/ u* {" Z* d1 A, p
- $this->ajaxReturn($res, 'json');. q( _2 z% s6 B6 w, e# Y/ R5 v
- }* J: L1 x/ r I6 K
- }
复制代码 5 e E5 W, B9 _% L# H6 v$ G( x, M, R& \
8 V* m1 v' k9 v
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。7 ~3 k7 b/ V' G! l5 Z* y- D
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
. \. P( ^) s& r; {前台模板页建立index.html
9 Z/ R& z: k( W2 ?- <div class="">
: s7 ^* R! r" x- r& S8 K - <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
5 z5 c" X. z8 p! B$ j1 g: z6 Y/ q; H - name="j_verify" type="text" class="form-control x164 in">
+ ]4 Q2 {5 m; v; P* K: d - <img id="verify_img" alt="点击更换" title="点击更换"
( M2 a2 S6 @7 O0 s( ` - src="{:U('public/verify',array())}" class="m">
4 q& @; ]$ H" @9 @: } - </div>
复制代码 9 k6 B2 X" G+ V
使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
3 F9 K4 O# e" ? - var verifyURL = "public/verify";
! T \7 o+ r. ]4 D+ u- ~+ Y - var time = new Date().getTime();
1 ?; k$ Q; G' @6 B. h - $("#verify_img").attr({! T2 l7 q4 i! _. @5 N0 c! v
- "src" : verifyURL + "/" + time
' I3 j6 s5 l! q, O& i' |9 x - });
2 S% `* R8 h/ d4 S7 e - });
复制代码
6 ^' ^* t4 g2 I" H8 F6 Y8 p8 o利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现:
$ l/ n, t, E& \0 ^8 D& l- $("#j_verify").keyup(function() {( }$ Z/ E8 N. D+ e% L% M9 b- E3 P
- $.post("public/check_verify", {
8 q) Z8 K4 E, G Y - code : $("#j_verify").val()$ k9 {4 E1 p) t' N9 c
- }, function(data) {9 K( n$ r& P$ ]5 ?4 _( y
- if (data == true) {8 ^7 m0 E5 W; ?& f7 o
- //验证码输入正确5 P3 ~/ Y7 G. ^6 Q: k& S
- } else {
% g! \5 P* @: a1 \/ k. J& d% J - //验证码输入错误- X/ \+ o2 s W) A
- }
5 R, f2 Z, T+ n2 z - }); [ ~1 m8 N- X1 j/ E! l4 |
- });
复制代码 - ^+ s. Y0 f7 D6 A/ i) ^4 H
利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(8 f+ Q2 i+ V( I, @( y+ E. e
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
- B8 u2 |, v/ ]5 ^- M - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合6 i+ q/ c9 \% i" a$ z
- 'expire' => 1800, // 验证码过期时间(s)$ ?4 U* L* Q6 i6 L8 c. L0 ]* N
- 'useZh' => false, // 使用中文验证码 " a; N" w/ j x
- 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
: G" e X* c: {$ O* I - 'useImgBg' => false, // 使用背景图片 1 O2 Z% z; X% S
- 'fontSize' => 25, // 验证码字体大小(px)
: A( C+ L& O6 u% x; t7 x3 _! N - 'useCurve' => false, // 是否画混淆曲线
& |# ]( S5 q7 \8 p) C8 i! v - 'useNoise' => false, // 是否添加杂点
. z& e8 `$ D0 X- w c+ U - 'imageH' => 0, // 验证码图片高度' i1 }) }4 q: q w4 ^# r, t7 Y4 j/ S
- 'imageW' => 0, // 验证码图片宽度9 o0 N" X" }9 x+ S* ?: Y; g
- 'length' => 5, // 验证码位数& y5 g ^' A# K; a) i/ S) \7 C5 c
- 'fontttf' => '', // 验证码字体,不设置随机获取
# a5 Y1 T; h7 V$ e A1 ^+ p7 ]; O - 'bg' => array(243, 251, 254), // 背景颜色7 d5 c) k+ F, t* U) S
- 'reset' => true, // 验证成功后是否重置
* L9 R! M! ?$ D# r* i/ x& z2 d4 x% g - );
复制代码
/ {7 @+ F6 a1 {- A( |% X9 [& G请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。 , C' u' G- m/ L
|