首先在Home/Controller下创建一个公共控制器PublicController
' Z* `' {* P4 [+ c- <?php
& @6 p; F" O) x3 }$ C - namespace Home\Controller;
( R! Q, z0 h: e9 m
" j) u5 P# x! S3 _- use Think\Controller;/ N4 H5 q; w" O* a/ H
- use Think\Verify;
% |& s# {, s3 K0 h! x! B" ^$ t
3 _# l P' X) D/ g# X0 Y+ ^- class PublicController extends Controller3 L" j5 F% y! M, ]/ v+ B2 x- h$ M
- {
. \) w: x( @% o" w - : p2 C6 r1 {1 }0 }- C
- /* 生成验证码 */
5 ?0 D0 z3 M/ @7 q - public function verify()- @3 T( c& q. V. R% J& Y/ ]
- {. e2 I& p9 k# @
- $config = [9 x% D" t) Z; ]" Y7 d$ V
- 'fontSize' => 19, // 验证码字体大小
5 Y o# a3 o/ }3 j2 T& b - 'length' => 4, // 验证码位数
$ n5 X8 g0 `( h7 \8 T" F - 'imageH' => 34$ v( R6 {3 n$ n, V$ W
- ];
; F" p* h: ]* J' r' _0 E - $Verify = new Verify($config);. M+ P) L2 W9 z! @% M7 ~
- $Verify->entry();, c9 i+ R/ {! N6 v* E) i) E
- }, r0 B/ f: R0 l2 R: O/ k
% [# w! I8 E: `1 j$ x- /* 验证码校验 */
' x) |5 d* d1 L/ ]9 X% J - public function check_verify($code, $id = '')
$ L$ Q ^% U( ~% }7 o% [ - {
% u' E: V5 A5 y9 e9 g% f - $verify = new \Think\Verify();! B6 P, B1 q+ D6 i$ S% I+ v# T$ ~
- $res = $verify->check($code, $id);
& V, Z$ s# N* z - $this->ajaxReturn($res, 'json');( B1 J! S( @8 G7 J7 W) A0 r
- }4 O( ]1 C3 j! T( V
- }
复制代码 $ j5 E) j3 I1 U/ m. ^8 e" t* |( J
" Y9 U5 n; F. h& n! C
verify函数用于生成验证码,config是用来配置显示验证码的属性。该属性有哪些可配置项,可以查看Thinkphp/Library/Think/Verify.class.php文件,此处不再赘述。( ]1 d1 j% _& a2 Y. H
check_verify函数用于校验验证码的正确性。模板post用户填写的验证码到该函数,返回$res==true验证通过false验证失败。 H2 W# ]8 U+ ?4 F
前台模板页建立index.html
5 o& e% ^- V9 {- <div class="">8 Z" j0 i- \+ J6 ~/ _8 B
- <label for="j_verify" class="t">验证码:</label> <input id="j_verify"
/ V/ ^; {7 k4 B2 M+ x& X5 n& e - name="j_verify" type="text" class="form-control x164 in">- `$ P* ]9 z' a' I, G/ Z" ?
- <img id="verify_img" alt="点击更换" title="点击更换"
* F" D6 I) z! z+ u% A - src="{:U('public/verify',array())}" class="m">
, B: g0 H8 o: ~2 z, M i! K# M - </div>
复制代码 * C; |- {2 H9 b
使用Thinkphp的U方法形成生成验证码的图片。 到此验证码即可正常显示。点击刷新验证码从上面产生验证码的链接我们可以看出,域名/public/verify即可产生验证码。Thinkphp的验证码生成机制是,如若我们需要产生新的验证码,在该链接后加入一个变量值即可。 我们可以考虑实现public/verify/变量值的形式URL。 - $("#verify_img").click(function() {
0 |0 Q: K1 `0 w. T" [ - var verifyURL = "public/verify";, T$ j7 n* Z3 F; I, Z
- var time = new Date().getTime();- w5 X* L6 H& R v1 y' U, H
- $("#verify_img").attr({- p: E7 k" _+ f( s; _0 \
- "src" : verifyURL + "/" + time
4 j; m% U' v' p b; G4 [ - });0 S$ G5 E5 w; y+ D1 l$ @. ]# ~
- });
复制代码
* g: k1 F0 e5 w8 U利用JS获取当前时间戳加入到URL之后即可。 到此我们即可实现验证码的点击刷新功能。具体表现形式,自己随意哈。 异步校验验证码大家一定见过在某些网站,我们输入验证码的时候,输入的过程中文本框后面一直显示错误,直到我们输入争取的时候会先提示验证码正确的形式。下面代码就可以实现: ' E* X: d" j+ t0 @% b1 a
- $("#j_verify").keyup(function() {6 Z% }; _- t9 }4 P
- $.post("public/check_verify", {, R+ z e2 g( B+ T) O
- code : $("#j_verify").val()# Q/ y0 k9 v# z, p
- }, function(data) {+ L w. m. G/ d" ]. Z. ^4 S% `' `3 I
- if (data == true) {
/ i1 Y3 u! G+ t( y7 |7 G - //验证码输入正确7 g( R' `" x9 |5 q
- } else {
U# Z' {/ y. J - //验证码输入错误1 t! N; n$ T$ Y$ m" l4 N" i
- }! f* p4 A6 H6 Q# |2 ^7 L/ b
- });
# O. i9 {! R+ ~' L! P, n' t - });
复制代码
* O% X) M. {) @ r利用onekeyup。原理就不需要多讲了吧! 这样我们就可以实现在提交用户名密码之前先进行一次验证码校验,之后表单提交之后再进行一次校验,提升用户体验啦! 还没结束:当我们采取以上形式实现验证码两次校验的时候,肯定会出现第一次异步校验成功,但是提交表单却提示验证码错误的情况!其实原因还是出在Thinkphp的Verify.class.php上: 以下是该类初始的config配置: - protected $config = array(1 } y$ s: S9 G# W8 V: t' i9 n
- 'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
0 e: L1 A4 ]4 |3 ?: t - 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
$ n# Q l5 ?( G - 'expire' => 1800, // 验证码过期时间(s)
0 Q# s! W" L l - 'useZh' => false, // 使用中文验证码
" j7 m& z) I+ @9 T7 C) f - 'zhSet' => '……此处不粘贴了,太多了!', // 中文验证码字符串
: I/ ^: v, N p; v+ b! Q9 j - 'useImgBg' => false, // 使用背景图片 ! I( b. c2 {, E; g8 h0 Q# x$ n
- 'fontSize' => 25, // 验证码字体大小(px)
6 z3 l- G3 I; u2 g4 U - 'useCurve' => false, // 是否画混淆曲线
: Z1 t/ |4 `$ B- D - 'useNoise' => false, // 是否添加杂点 8 w6 x' x M5 ? m9 `
- 'imageH' => 0, // 验证码图片高度, h2 o2 l# V8 K: N* k* h9 s* M
- 'imageW' => 0, // 验证码图片宽度
3 L9 P8 Z7 x7 j# R V: E; G) o: C - 'length' => 5, // 验证码位数9 l v/ {( B5 q8 i
- 'fontttf' => '', // 验证码字体,不设置随机获取
' y3 r9 U6 i4 N+ r! I# X - 'bg' => array(243, 251, 254), // 背景颜色! k5 T) x5 f; C* v Y
- 'reset' => true, // 验证成功后是否重置+ B' G7 _; z6 h6 Z9 s
- );
复制代码
8 b* b. e7 D% Y4 C0 t% C$ e请大家注意最后一个属性reset 表示的是验证成功后是否重置验证码。相信大家都明白了吧,我们进行第一次校验通过之后,其实该验证码已经失效了,只不过因为我们采取的是异步校验,页面并没有刷新,导致了第二次申请校验的时候和系统产生的已经是不相同的了。所以如果大家喜欢这种两次校验的风格,可以考虑将reset配置为false即可。 好了,基于Thinkphp3.2.3的验证码问题今天就总结到这了。只是大概说了一下实现方法,具体内容还请大家参考TP官方手册。如有错误之处,欢迎大家指出。
0 P" C- v' ?0 X8 G' F |