首先在Home/Controller下创建一个公共控制器PublicController & F7 v3 O% i; T5 Q% b8 Z
- <?php; u# O' S: i7 L4 [3 \7 ~9 x
- namespace Home\Controller;3 x) v% H+ ~. _# h! m
$ A5 z$ }3 c3 e) ]. U% a% Q3 u- use Think\Controller;
- d5 m- g# z; {* g0 x5 w6 D# x ? - use Think\Verify;
" s |! r2 w2 [: l, r* @% W
" Q! E$ n. a& u. |- `/ B- class PublicController extends Controller) j% ]. |2 k, L9 k" m" o& }! w
- {2 s. e) Y y( b* ~
# I$ e7 p% F. y" W- f+ K" c- /* 生成验证码 */
# Y1 m3 N6 ?2 m( Y0 B - public function verify()
4 E: O' i: b+ g0 N+ R( _ - {, A5 g1 Y& @7 S4 }: e
- $config = [" W0 C+ n; z9 e8 z5 e3 {& ]+ b
- 'fontSize' => 19, // 验证码字体大小2 {+ s" A& g4 }5 q" p. A
- 'length' => 4, // 验证码位数. p/ ?) t: h' L% s; ]
- 'imageH' => 34
, H9 v9 `* Q9 _# P- C1 ?( k - ];7 B# A9 g/ `2 q7 e
- $Verify = new Verify($config);
2 E% A, [. k& u3 k1 Y - $Verify->entry();0 I/ M3 o7 }8 |
- }
$ w& t' E! m6 g4 R( m- A
, B5 t" j/ ^7 T# h- /* 验证码校验 */
6 i/ g4 U& N+ S3 [+ e" U - public function check_verify($code, $id = '')
1 C5 T8 E1 d) Q; B7 u - {
" Y; ~* s1 p* t - $verify = new \Think\Verify();
, {/ H$ T( O) \ - $res = $verify->check($code, $id);+ j$ a4 z' i" W/ r2 n* W
- $this->ajaxReturn($res, 'json');
}2 v9 d* r* ~& f- O6 n1 y - }
& X9 C4 Y: Y0 K8 v - }
复制代码 4 Q" P8 w6 ?9 Y% s6 i, ^
$ i6 _- r! H: F u L5 R% `- M7 {
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。1 |5 U* r' N, I; c7 W
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。
2 B" ^( C* ]( P( r: t前台模板页建立index.html0 @/ w6 t. O j( I/ q& Q# q. N- {
- <div class="">
, S9 Q( O s O! w0 l - <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
9 W0 y% @% T- K; N% y - name="j_verify" type="text" class="form-control x164 in">
) ?" I' W2 V8 S' L# \( V - <img id="verify_img" alt="点击更换" title="点击更换"! i5 n- q( U* T
- src="{:U('public/verify',array())}" class="m">
0 Y8 s; L* y3 j7 f9 J - </div>
复制代码
" W" H! V* W1 Q使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {/ B* C, M$ L3 R1 \
- var verifyURL = "public/verify";% @4 g6 T/ S- d' m+ m
- var time = new Date().getTime();0 M ]4 |: @. i2 K M
- $("#verify_img").attr({5 t; l a8 e% `& U9 W) y
- "src" : verifyURL + "/" + time6 I4 R% g' I4 s! D" `2 l
- });
% K. u2 X8 x' m$ y2 J2 e - });
复制代码 $ r9 K/ Y Y2 \# W c, h
利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: & u; m0 P& |7 D% H: u/ B6 g8 a
- $("#j_verify").keyup(function() {
4 Q. o# n \# l v* f8 ^+ I7 l: { - $.post("public/check_verify", {- I$ n/ |4 s% ^' p
- code : $("#j_verify").val()
B j$ r& x( G: y2 x - }, function(data) {
+ c+ ]' U4 x6 U3 z: e - if (data == true) {0 O2 f; d9 V% ^& @. z
- //验证码输入正确& j* T2 Y' R2 e
- } else {
7 K4 T# ^& o7 }1 h- P C - //验证码输入错误
- `& [( n) |: O - }4 t4 T6 h# O* ]
- });; `- z% l4 ]' E& }: c3 Z. n6 J
- });
复制代码
% [8 Y7 j) I8 c3 J8 Z利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(( ~ i$ u' E- K; i3 e8 Q
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
6 m) S$ p% U* q: T' A8 v3 D* { - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
' f3 \, N" I" U9 a' k* H1 ~* } - 'expire' => 1800, // 验证码过期时间(s)$ ]5 d$ q q- J
- 'useZh' => false, // 使用中文验证码
2 i1 C. |9 z: X! r: O4 X3 C - 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串8 F* |0 h& y' ?( Q
- 'useImgBg' => false, // 使用背景图片
2 C9 g5 k1 X8 i( ], c9 ~$ O - 'fontSize' => 25, // 验证码字体大小(px)4 y) ~$ r' g4 ~- ~% D1 j
- 'useCurve' => false, // 是否画混淆曲线2 t. P p K' j% F: X, p
- 'useNoise' => false, // 是否添加杂点 : @0 D' [5 B+ _( g9 e5 ^
- 'imageH' => 0, // 验证码图片高度0 c6 O* ^* `1 \; a- A6 e0 m& A1 }
- 'imageW' => 0, // 验证码图片宽度
* Y3 P1 I/ S8 G! B9 l - 'length' => 5, // 验证码位数* g7 N2 \: t. P! l x- {
- 'fontttf' => '', // 验证码字体,不设置随机获取
# M9 d9 A5 I8 T: `6 P2 v - 'bg' => array(243, 251, 254), // 背景颜色
! j. v6 t Q* @ - 'reset' => true, // 验证成功后是否重置
3 y* z5 f3 D5 v* i - );
复制代码 9 @! P1 I# f9 d% d( d1 _6 j
请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
4 i# k# Z+ ~3 {* y x1 O |